All the Things

Under the category of building in public… Portfolio updates: So far, I’ve gathered a lot of examples, began to sort them, created some initial content, included an experimental fpo brand I can play with for ui/code/creative elements, have a basic information architecture, and a basic portfolio site relaunched - even with a few quick pivots in the process to show things that have come up in conversations - like scroll triggered animation, AI style representation modeling, design system theming with design token variables in Figma, JSON, and CSS vars. As a law of nature, there’s always many more things I could do to it. But, usually don’t share that part of the process, because that wasn’t my goal, and you always have to scope down for time.  But, I get the build in public philosophy. Provided there’s no nda or proprietary information involved, showing process is great.  Kind of wish I had kept all my blogs over the years. I had a cg phase that I always wish I kept live, for example. So,

 I like the look of UIKit so I created a few things to explore the basic components and default animations. Here’s a UIKit based demo page that is self-contained for quick prototyping.  https://stephaniejagiello.com/lab/uikit_themed.html https://stephaniejagiello.com/lab/uikit_themed.html

  https://www.sequoiacap.com/article/ai-paradox-perspective/

Good read... https://www.itsnicethat.com/articles/pentagram-paypal-rebrand-graphic-design-project-190924

 There's so many ways to create UI animation these days. Here's a quick UI motion test just to play with a new workflow.

 I like this timeline editor in Dora. It just maps to previous moton editors.  Also, the viewport is a visible object that you can move.  And, responsive views are selectable as device specific. That's interesting.

Generates random user.    https://v0.dev/chat/ipBbC0n3NCt These v0s are creating a giant open source UI library growing exponentially by the day with examples that are not just basic components, but all kinds of use cases. Interesting stuff. Api used in the example: https://github.com/RandomAPI/Randomuser.me-Node#

Grabbing 5 minutes to checkout Cursor.  Sharing the interesting things as I go. https://www.cursor.com/blog/prompt-design  Prompt design using JSX.  https://github.com/anysphere/priompt

Luma: Prompt: An immersive 360-degree video of the vast Sonoran Desert at sunset, where towering saguaro cacti stand silhouetted against the fiery orange and red sky. The camera glides smoothly over the desert floor, capturing the intricate patterns of cracked earth, shifting sands, and rugged rock formations. As the light fades, the sky deepens into a starry night, revealing the Milky Way arching over the desert, while a lone coyote howls in the distance. The scene is serene yet awe-inspiring, with a sense of vastness and quiet solitude. Cinematic and atmospheric, blending the warmth of golden hour with the mystery of the desert night. Runway ML: I try out new AI tools a lot lately. Not because I use them for work, but because I want to know what they can do. I’m always curious even though 99% of the time they don’t output what I’m after. There’s a lot of ways to proceed with that in mind. 

Out of curiosity, I’ve been on my phone casually trying out different text to video output qualities from a few different sources. There is such a range. This one is from huggingface. https://huggingface.co/spaces/KingNish/Instant-Video Here’s the prompt: A tv studio view of the camera behind the scenes of a tv news program. The camera is filming the tv news reporter for the nightly news. Luma: The end is pretty odd. Runway:

I’m available for new projects! With over 20 years of experience in UI/UX design, front-end, motion design, and creating high fidelity visual websites, I’m open to collaborate on fresh projects.  If you’re looking for clean, functional, and impactful designs, or want someone to iterate toward a solution, contact me stephanie@stephaniejagiello.com. Let’s chat!

Exploring use of Style Dictionary in Replit with the Agent. I had it add a UI so I could visualize it’s variables in the browser as well, and add an editor.  >>> Replit Agentic Description: This project implements a design token system using Amazon's open-source Style Dictionary tool. Here's an overview of its key components: Configuration: The config.json file sets up Style Dictionary, defining token sources and output formats for CSS, iOS, and Android platforms. Build Process: A Node.js script ( build.mjs ) uses the Style Dictionary library to generate platform-specific design token files. Token Definitions: JSON files in the tokens/directory define the design tokens. For example, color.json specifies the color palette. Output: The build process creates platform-specific files like StyleDictionary.swift for iOS, containing design tokens as native code. Web Demo: An index.html file demonstrates the usage of design tokens in a web context, showcasing colors, typogr

Working with a design system, I want to figure out the best approach for designing variables. I want to know what is the latest standard, tools, and existing code. What works and why. So it can be solidified into a programatic design choice, and continue to add benefits.  There can be a big difference between a ui theme and a more immersive brand experience in a web browser. It helps to be able to work with all of it, give it specific definitions and a shared process. I also look for the things themes can do, and can’t to create visually appealing and interesting designs. Design systems are essential for maintaining consistency and efficiency in modern web and app design projects. By using variables as design tokens, you can create a bridge between design and code, ensuring that the values for colors, typography, spacing, and other design decisions are consistent across platforms. In this post, I’ll explore some of the best Figma design system resources in September 2024 that take the

I hear that OpenAI is planning to release Strawberry as part of ChatGPT in the next 2 weeks.