The ask
The HBOMax logos and others needed entrance and end cards created that would fit within a 16x9 space. These rules would govern how the logos and text appear on screen during ads and programs. The placement and size of the logos needed round numbers in different units of measurement within a 1920x1080 space. 4K and 8K screens were also to be taken into consideration.
The grid
I created the grid using 1920x1080 as the pixels being the base unit. These pixels would later be subdivided to 1/8th for 4K and 8K screens. Those would be the second unit. Lastly, I divided the screen itself into a 64x64 grid. These were the third and last unit of measurement.
Screen logos placement
I placed and sized the logos so they would be aesthetically pleasing on screen as well as mathematically sound in all three previously mentioned units. The logos and text placement can be placed in a standard HD screen or an 8K screen without offsetting one pixel.
Screen text placement
Placement of the text worked using the same grid as the logos. I used the 64x64 grid to determine text placement, height and leading. These rules also allow text to be scaled perfectly.
Template and branding execution
The brand guidelines that were to house the screen logo and text rules also needed a template. Here are examples of the template design as well as executions throughout.
Presentations
Presentation design for executives.
Website wireframe
When I was given this project it was the first time I was introduced to Sketch and this wireframe was due the next day. Thank goodness the interface was friendly enough to get this done in one night.
