React Miami kicked off between April 18-19 with more than 480 developers from across the world in attendance. Created for and by the React community, React Miami brought together industry leaders to share the latest in React, ranging from marketing insights to Web3, app development, and everything in between! 

With so many incredible developers and industry leaders under one roof, what did you miss during the two-day event? Don’t worry — G2i has you covered with the highlights! In this blog, we’ll showcase the speakers who provided insight on design and brand topics.

Interested in other speaker topics? Check out the other G2i React Miami blogs:

• Web3

Let’s dive into the Design & Brand speakers:

Expectation vs. Reality of Marketing Websites

Vercel Director of Developer Relations Lee Robinson took the stage to discuss the differences between your expectations and reality when building marketing websites, and the tools you can provide developers. 

Throughout his talk, Lee shared the realities of how developers work with marketing websites. From running A/B tests and experiments and improving accessibility, to localizing content for visitors and loading fonts and third-party scripts. More goes into developing a marketing website than meets the eye. 

The highlights:

Developers must navigate the “iceberg of the web”. 

• Handling pieces such as images, fonts, and scripts becomes difficult without a toolkit for the web, and the consequences can be disastrous, impacting both the user experience and SEO. 

Customers expect…

• A personalized experience
• Great performance
• Website availability when needed

Enable developers to build fast sites by working backwards from your ideal user experience and providing the right set of developer tools.  

• Measure what matters
• Optimize for fast iterations
• Experiment and iterate fast

Want to learn more? Follow Lee on Twitter. 

Stealth-mode North Star! Rebranding in Secret with Feature Flags

Independent Engineer and International Speaker Kathleen McMahon discussed her work with rebranding on the web, and how she kept it a secret with feature flags. 

Throughout her talk, Kathleen focused on how great products combine valuable features with a strong brand designed specifically for your target audience, and the importance of defining your brand’s “North Star” to deliver to your customers a compelling and memorable experience. Outside of developing a strong brand, Kathleen discussed how developers can keep rebrands a secret within an organization with feature flags. 

The highlights:

Kathleen's LaunchDarkly journey...

Kathleen started by defining key components of the LaunchDarkly brand that were missing. For example, defining what foundational elements of a brand were missing, such as:

• Fonts
• Icons optimized
• Design tokens fleshed out

What is a brand north star?

• “Your brand’s north star is the promise you are making to your customers” - M81 Creative

Continuing to use LaunchDarkly as an example, Kathleen shared that LaunchDarkly’s north star is:

• “Software powers the world. LaunchDarkly empowers all teams to deliver and control their software.”

Creating a north star and redefining your brand takes time and requires an in-depth strategy, competitive analysis, etc., and the process can take as long as a year or more.

• Rebranding often happens in secret, while your existing branding is still public facing, and developers must know how to maintain this secret through tools like feature flags. 
• Rebrand impacts existing products and services, and you must be careful if visuals are out of sync across different platforms and products.

Want to learn more? Follow Kathleen on Twitter. 

Democratizing Live Video with React

Mux Community Engineer Ashley Huynh took the stage remotely to discuss the top seven things you should consider when building a live video app.

The impact of live video is apparent in our everyday lives, and while creating apps with video can feel daunting, Ashley dove into the topic to share how we can create dynamic experiences in real-time for users. Ashley shared her insights into this topic, from considerations like encoding and cross-device compatibility, to creating a simple in-browser live stream using React and Mux Video.

The highlights:

Live video is the heart of online video, and bridges the gap between video consumption (video on demand or video streaming services) and communication (real-time video platforms). 

Seven considerations for building with live video:

1. Video quality (bitrate and resolution)
2. Live performance metrics
3. Cost  
4. Building to handle request volume and fluctuation (choosing the right architecture)
5. Video latency
6. Cross device compatibility 
7. Accessibility (live or auto-generated captions, screen reader compatible, etc.)

Ashley ran the crowd through a demo of creating a live video stream leveraging React and Mux

Leverage available tools such as:

• Websocket API
• Media Recorder API
• FFMPEG
• Mux Live Streaming API

Important tip: In-browser streaming is not recommended over using native streaming tools like OBS. 

Want to learn more? Follow Ashley on Twitter.

Learn Enough Design to be Dangerous

Progress Software Developer Advocate Kathryn Grayson Nanz gave a talk to dispel the common fear of, “Oh, I could never be a designer”, by diving into the simple belief that design is a skill that can be learned just like anything else. 

What are the basics that dispel the misconceptions about design? While a designer’s responsibilities are complex and multifaceted, the design basics Kathryn covered will give you insight into what you’d need to learn to get a design job. Whether or not you are looking for a design job, these are also good skills for developers who want to learn how to create a UI that doesn’t look terrible. 

The highlights:

Dispels the myth that you must have “an eye” for design. 

• Starting off with color (and the color wheel), Kathryn dives into explanations about everything from hues, tints, tones, and shades, to warm vs. cool colors, colors schemes, and more. 

Outlined the Gestalt Principles of Design when introducing layout concepts (complete with examples!). 

• Similarity
• Closure
• Continuity
• Proximity
• Figure/ground
• Symmetry 

Explained the importance of balanced design, white space, and the world of typography.

Balanced design comes in three forms:

• Radial
• Symmetrical
• Asymmetrical

A lack of white space is a common design mistake that is unfriendly to the user.

What are some of the typography terms and basics you should learn?

• Character
• Typeface
• Font
• Kerning
• Tracking
• Leading
• Widows, orphans, and runts
• Rivers
• Hyphens, em-, and en-dashes 

Want to learn more? Follow Kathryn on Twitter.