Branding

The new design of FoodNetwork.com reflects an effort to not only elevate the design of the site and improve user experience across desktop and mobile, but to also meet the changing needs of the editorial team who have since outgrown the capabilities and structure of the current site.

Design Goals & Philosophy
1

Showcase the depth and breadth of Food Network content and to further build upon key brand differentiators - our talent and our recipes.

2

Visually communicate a balance between culinary and entertainment businesses while creating a unique experience for each.

3

Support business goals & objectives by delivering an engaging, dynamic and flexible user experience.


Bold typography, larger images & video and new module layouts provide an extremely flexible framework for content creators to tell compelling stories and increase user engagement. The design builds upon the energy and excitement that our audience has towards our content. It utilizes the wealth of photos and videos at our disposal. It establishes a cohesive yet flexible foundation for digital brand extension outside of the site. The design is well suited to achieving great site performance. By incorporating visual design systems for content-driven initiatives, design has a streamlined workflow that achieves a cohesive brand experience.

Logos

A reference and guide on the display, colors, sizes, and usage of the Food Network logo.

Colors

A reference of the colors used on Food Network.com as well as downloadable swatches for various applications.

Typography

A reference of the webfonts, type sizes, and preview of standard text elements used throughout Food Network.com

Icons

Preview of the icon system on Food Network.com. The icons are webfont based from symbolset.

Visual Patterns

Visual reference and download of the various pattern styles used throughout Food Network.com

Designed Content Systems

Explanation and documentation of the various designed content systems used on Food Network.com including Themes, Tiers, and Syndication.

Grid

Explanation of column and gutter widths, column counts, rules, and code examples.

Media Sizes

Media sizes documentation that shows available media dimensions