Sprint X NBA Re-design – Responsive Design

In early August, Sprint and NBA requested that we revamp their microsite by the time the 2012 NBA Season began. The team that was assigned this task here at Digitas was Lawrence Lee (Creative Director), Marc Pelleman (Copy Writer) and I – Jason Uzarraga as the ACD/Senior Art Director. When I envisioned this page I definitely wanted to keep it as clean as possible – simplicity was the goal while trying to highlight key elements. Developing a layout that has opportunity for growth in mind while trying to stay true to the design integrity was the philosophy I kept in mind when designing this site. The challenge was balancing the NBA, Sprint brand and technology presence.

Within the design you will see that instead of trying to insert multiple columns on each row to create a more condensed content layout I chose to design single rows that can be used to highlight various information and in the bottom I inserted buckets to finish off the layout with tier 3 content. Each row has the capability built-in to allow the user to scroll left and right for sections that would have more than a single message.

This layout worked great for the fact that we wanted to develop the microsite on a responsive framework – for those who do not know what a responsive framework means, its essentially a programming method where with one design it can automatically re-adjust to fit multiple views (desktop, tablet and mobile). Below is the actual design deck that was presented to the client – within that deck you will see how the page s look on both the desktop as well as a mobile device.

This design was very well received by the client that our future efforts will reflect the same layout and framework – making this the baseline template for future work under this category.

FINAL DECK:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s