A dash of live preview

Can a live preview be faked? Within the tight deadline, our developer didn’t have time to build a live preview next to the branding editor. However, we wanted to include something visual to indicate & preview configurable changes to the user. The risk in making this preview seem too real was that the user could be fooled into thinking there was a bug if the preview did not respond to their changes. I went for a pared down layout with an obviously fake player to indicate to the user that this was just a representation of the configurable changes, not the custom code they could inject.

Forward Thinking

Forward thinking truly made this UI come together quickly. As I designed Sherpa’s new player, I knew customization and branding was coming soon enough. I sought inspiration from branding tools I’ve used before, like Zendesk’s Branding feature and and tools I’ve designed before, like Mukurtu CMS. Then I designed the player with as few visual variables as possible so that when it came to branding, one could choose from a few color selectors and drop in their logo to meet minimum branding compliance. Everything else could be magic-ed by CSS.