Brent Jackson - design engineer and aspiring indie game dev
Novantica is set in an open world environment with various interior scenes that asynchronously load in when the player is nearby. When I started developing the game, I was originally planning to use a top-down third-person perspective, like many of my favorite old adventure games. Because it was set in an urban environment, I also wanted the player to be able to look up towards the sky and get a…
After redesigning the NPC characters in Novantica to use modular parts and color schemes, I realized that the approach I had set up wouldn't for the game due to poor performance.
Since Novantica is set in a futuristic city, I always wanted to make sure the game had a certain level of city life – people walking around, bots zooming by, drones buzzing, trams gliding, and bikes rolling along. I hadn't done much 3D modeling before learning Unity, and, while modeling props, buildings, and other blockish things didn't seem to difficult, I struggled with creating humanoid…
When I first started working on Novantica , I was considering releasing on iOS in addition to Steam and used TestFlight to manage development builds on my phone. I've always intended for the game to work well with gamepads/controllers, but I also wanted a way to play test the game using an on-screen virtual controller. I decided to use the InputSystem package so that the game would support most…
One of the more perplexing bugs I encountered working on Novantica so far was when all the NPC extras in the game suddenly turned a greenish-yellow color. I had just swapped out URP materials for ones using a new shader, so I suspected that change made this happen, but I didn't want to revert back to the old materials. To add icing to the cake, this issue was only happening in builds, not in the…
In March 2020, I remember the former mayor one day telling people to go out for dinner and see a show – and the next day hearing that it wasn't safe to get within six feet of another person. If you haven't been to New York before, it's not easy to walk around outside and not get within six feet of another person. In hindsight, it was relatively safe to be outdoors, but at the time, we were afraid…
Building UI with design constraints from utlity CSS to CSS-in-JS
A constraint-based system for organizing styles in UI design
An exploration on the relationship between global and component-based styles and a mental model for styling applications.
Asking should designers code is asking the wrong question.
Defining a portable file format for high level style information.
Using constraint-based design principles to create themeable components and UI
On more than one occasion, I've heard people conflate the cascade feature of CSS with inheritance.
CSS-in-JS solutions provide a lot of benefits over lower-level approaches
Tools for building modern front-end applications in 2019
A look at common threads across over 500 GitHub repos
Using standards-based approaches for UI component interoperability
Intro Basscss, CSS Stats, Rebass, styled system Design system site screenshot Background Tools we use What's next Future Images tool correction Collaborators list Rebass HN quote intro I like tools Background Hackathon Siloed teams & separate apps "Common Components" No open source React, styled components, npm Catering to Developer problems GitHub: Open Source from the start Shared ownership…
make it work, make it good, make it fast Readme deiven development Make it so good people want to use it Solve your own problems Build what you need Anticipate changing requirements Balance consistency with flexibility Robustness Quick to respond to changing requirements Avoid premature abstractions
People like building blocks. IKEA effect basscss rebass axs styled-components & emotion styled system
style properties Inheritance (not the cascade) User style sheets (the cascade) In-line block Flexbox Grid Abstractions Sass Variables Imports Mixins (bad) Functions (bad) Standards Custom properties More bad stuff Specificity Selectors New Abstractions Hashed className s JS module scope Single build tool Portable code Runtime evaluation? CSS as assembly language
A look at some of the core ideas built into Styled System
Attempting to make writing documentation easier and faster
Over the years, I’ve noticed patterns in how I tend to approach component APIs and building out applications and libraries. The following is a collection of thoughts, opinions, and advice for defining component APIs that are meant to be more flexible, composable, and easier to understand. None of these are hard-and-fast rules, but they’ve helped guide the way I think about organizing and creating…
White space is to be regarded as an active element, not a passive background. – Jan Tschichold Negative space is arguably the most important part of a visual composition. Just as in music, the rests, breathing room, and headspace are the key players in rhythm. Without them, you just have noise. Similarly, negative space in design helps create the rhythm, contrast, and motion in a visual…
While React is extremely flexible in terms of how you can structure your application’s UI, I’ve found that a few patterns for style composition have helped me keep things organized and easy to work with.
For a while now, I’ve been interested in the idea of creating portable, interoperable functional UI components that can work in any DOM rendering library, whether it’s React , Preact , hyperscript , bel , yo-yo , or some other library. The idea of functional UI components is a simple one: pass arguments into a function and it returns a representation of the DOM, usually with encapsulated styles…
definition of DSL A domain-specific language (DSL) is a computer language specialized to a particular application domain. This is in contrast to a general-purpose language (GPL), which is broadly applicable across domains. https://en.wikipedia.org/wiki/Domain-specific_language A domain-specific language is created specifically to solve problems in a particular domain and is not intended to be able…
I recently read this excellent article , where the design team at Vox has devised a testing framework for new UI components introduced into their pattern library. While the methods they suggest are excellent, and what I’d consider something that should be industry-standard in our field, it got me thinking that this concept could be taken a step further. What if designers wrote actual unit tests…
Everything in a UI is a component. This includes buttons, inputs, forms, promotional modules, pages, user flows, etc. I use the word component not only because this is how the underlying code is written in libraries like React and Ember, but also because pieces of a well-designed UI system should be composable .
React is a great way to generate static HTML with a component-based UI. One of the biggest hurdles to working with React is the amount of boilerplate and build configuration it takes to get going. I wanted to make it dead-simple to start building static pages with React and without the need to install tons of npm modules and configure webpack.
When it comes to designing for the Web I like to follow a handful of general principles. First, design for the medium, or as Frank Chimero puts it, follow “the grain of the Web” . The Web is fluid - based on screens and devices of varying sizes – and typography on the Web should reflect that. Second, design content-out , which usually means designing around a strong typographical base since the…
Why the new MacBook might just be my favorite computer ever
Virtually every style guide has a color palette section in its documentation. Many times I’ve seen this documentation created manually, where every change to a color requires updating the values in two places – the stylesheet and the style guide. This often leads to one falling out of sync with the other, and makes maintaining a living style guide more difficult. The problem with this approach is…
Geomicons Open is an SVG icon set completely hand-coded using the Path element. The first version’s source was built in complete SVG, but I soon realized that the wrapping SVG and Path elements were the exact same for each icon. In an effort to DRY things up, I set up a rudimentary build process that would take source code containing only the Path elements’ d attribute value and create valid SVG…
I’ve been dabbling with React for a few months now and using it in several small open source projects to better understand the technology. React’s focus on reusablility, along with the ability to install and require components via npm, provides an elegant way to rapidly build application UI in an efficient and consistent way. It’s also a great way to handle server-side rendering and provides high…
CSS was first introduced as a way to reduce the complexity of using inline styles and to help separate concerns. After years of ballooning stylesheets with the same values being used over and over and losing sync, CSS preprocessors introduced variables to help keep values defined in a single place. Soon custom properties will be part of the CSS specification, which promises a native, more robust…
Don’t make assumptions Don’t be specific Don’t override anything Don’t entangle it with markup Don’t repeat yourself
Every once in a while I hear someone complain about the visual homogenization of the web, and front-end frameworks often get the brunt of the attack. This visual sameness isn’t necessarily a bad thing.
I’ll admit it.
I’ve been dabbling with HTML and CSS for years—building small websites for myself and friends and building prototypes to test designs. And, while I’ve been fascinated with the idea of designing in the browser for a long time, it wasn’t until recently that it’s become much, much faster for me than using traditional design software.
About a year ago, I wrote Hamburgers & Basements: Why Not to Use Left Nav Flyouts . Since then, a few things have happened.
Your tiny type is hard to read – no, not hard to read, impossible to read. I carry my phone with me everywhere, but I always seem to forget my magnifying glass. I tap the Safari Reader button, but that’s not a solution to the problem. That’s a band-aid for your bad typesetting.
When opening an application, a user should be able to understand its functionality, see relevant content, and get to where they want to go. Applications that obscure navigation with the intent of focusing on content can make finding specific information difficult. On the other hand, skewing towards too much navigation can overwhelm the user. Mobile apps should balance navigation for users with…
While table views provide a clear and simple way to navigate certain types of content, mobile should be about putting content and user goals first and navigation second. Don't overload the user with navigation choices, show meaningful content instead. Even though tab bars are great – sitting below the content, out of the way until the user needs them – there are new opportunities to explore…
At first glance, these two navigation patterns seem very similar, but there are a few points that give table views a huge leg up. When dealing with a multi-tiered hierarchy or a variable amount of navigation items – such as text messages, emails, folksonomic categories, folders, files, etc. – table views can be a great solution. Lists are generally easier to scan than tiles, and vertical scrolling…
"Good design makes a product understandable" – Dieter Rams Good navigation should do at least three things well: (1) it should allow the user to navigate; (2) it should serve as wayfinding, letting the user know where they are; and (3) it should help the user understand what the product is capable of. If your navigation is not doing these three things, something's wrong.
I’ve been producing electronic music on my computer for about a decade now, and I don’t have a whole lot to show for it. After moving to DC from Shanghai, where I played a lot of live sets and DJ gigs, I realized there wasn’t much of a music scene in DC, and I stopped playing out. After a few years, I noticed that I generally wasn’t being inspired, and I wasn’t growing much as an artist. I also…