Silver Fox Header with background image wireframe sketch

Wireframe sketch, website component planning

Silver Fox Renewables LLC, Pasadena CA

Silver Fox Renewables LLC designs, installs and maintains high quality solar-powered energy generation systems.

Coding Map Wireframe Sketch

I needed a sketch to plan out the code required to layer components over a background image in a responsive mobile-first layout.

Silver Fox Renewables Header Code Map Sketch

Sketch for Silver Fox Header with background image

Sketch for Silver Fox Header with background image

As the developer, in addition to being the designer, I usually don't need fancy comps. Sometimes I just need to visualize the code to wrap my head around it.

This image maps a flex-wrapper inside a table-wrapper inside a flex-wrapper.

Silver Fox Renewables Responsive Header

The header for Silver Fox Renewables, LLC.

The header for Silver Fox Renewables, LLC.

The header for Silver Fox Renewables fits within a flexbox sticky footer. The header needed to be a flex item. I needed an element that could hold a background image set to cover.

Surface elements display responsively. I altered the Bootstrap navigation.