Precompiler Sessions

CodeMash offers two days worth of precompiler sessions. These are either half day or full day workshops which provide an opportunity to get in-depth, hands on learning. The two sessions that I attended today were "Introduction to Game Development with Unity" and "Build Your First Design System". I've been interested in learning about Unity for a while -- it's been likened to a drag and drop game creator. As for the Design System talk, I have a couple of side projects that I'm working on and I wanted to find a better way to plan out reusable UI components.

Game Development

During this session, attendees arrived with the Unity software downloaded. Mike Geig walked us through layer and asset creations. Honestly, I didn't know what to expect with the software. I opened it up and it was intimidating. Imagine Photoshop plus 10 times more tools and physics. Actually the physics part is what made it fun. We were able to add players and blocks that represented scenes. Then we were able to apply different gravity values, or completely omit gravity or other elements of physics. It would have taken longer than the session to create characters and build scenes. Fortunately, Mike had prepared some assets for us to play with (just png images), including wall and block decorations, shadows, and a character with different poses for actions (jump, crouch, stand). After building scene layers, we started looking through the premade code that would allow our character to take action. I believe the code was in C#(C++?). I've yet to dig into C, C#, or C++, but Mike walked us through the code. After applying actions to the character and adding controls represented by arrow keys, we were able to enter test mode and get our character to move. The session was a fun intro to Unity. I'll be spending some time to practice and play around with the software features. I'll also have to dedicate some time to C#. Thankfully, Unity has several tutorials on their site.

Design Systems

The Unity session was a full day workshop, but for the second half, I opted for the Design Systems workshop instead. I'm in the middle of designing a site. Since I'm at the stage where I'd like to organize unique components, I figured that the Design Systems workshop would be helpful. In this workshop, we discussed what Design Systems (DS) were; we discussed when to use DS; we completed an interface audit of a site; using the audit information, we created a design system.

Nathan Rambeck and Kasey Bonifacio defined DS as "A set of reusable patterns and best practices organized to communicate consistent design and user interface elements for a brand." This made me think about Bootstrap, which is a library of defined UI elements which can grouped to make unique components. It takes the guesswork out of figuring out color shades and grid calculations, which speeds up the development process and encourages uniformity across teams. It also eases the struggle of translating design. However, the perfect DS cannot replace communication between designers and developers. It also can't prevent new developers from creating their own elements outside of what's been established in the library. At the end of the day, regular communication is the best tool for creating consistent design. It's up to the team to enforce these guidelines and introduce them to new developers that join the team. It's also up to the developers and designers to advocate their needs and constraints, and work together to develop solutions that will prioritize business values.

DS are also not for every team. Rather, teams should figure out the values and tradeoffs of creating DS from scratch for each project. Teams would have to consider who would be creating and, if necessary, maintaining the DS.

Next we audited a site of our choice. We completed an interface audit by looking for inconsistencies and patterns. (Of course there are other types of audits: content, accessibility, and performance). We took screenshots of all the buttons, fonts, headings, and colors. I chose to audit Critical Mass' site. A previous version of their site was one of my favorites. I enjoyed the bold colors and fonts, and the flow of the pages. It made it me feel like I was on an adventure. However, after usign some of the tools for auditing, it was clear that Critical Mass had a robust inventory of styles. For example, there were probably some hundreds of different shades of black being used either for background or fonts. This seemed excessive to me. For the most part, headings and buttons were consistent though.

After the interface audit, we used a design system starter built with Drizzle to create button, typography, color, and utility (i.e. padding, layout, grid, spacing) systems. Ideally, someone would use our DS as a library and be comfortable with knowing when and how to use elements from the system. Class names would be provided along with examples of each use case. The elements in the DS could then be used to create unique components by coupling class names that had already been established.

The focus was to make a system of reusable components that could be grouped to make pages based off of a design. That's what I like about DS. I make all of the tiny components and then when I'm ready to build pages, I can just take what I need for each page and reuse them without worrying about calculating pixels or finding colors. All of that has already been planned and organized, and it's ready for me to use.

Tools that I learned about:

CSS Stats Really cool site that displays font and color information for a site that you submit

Cloudfour Patterns Example of how our final system would look

Interface Inventory concept

Overall

Overall, it was an exciting precompiler day. I enjoyed learning about game development tools and having conversations about tools that help keep design consistent. Continuing with the UI theme, I'll be going to a workshop on accessibility tomorrow.