# VICE News **Years:** 2015–2017 **Role:** Design director **At:** VICE News — design lead trio under Kenton Powell, Head of Graphics and Design; peer to Brian McGee. Executive editor Josh Tyrangiel hired the three. **Client:** VICE News **Tags:** editorial, animation, design-systems, broadcast-and-web **Case study:** /work/vice-news VICE News launched a nightly half-hour news show on HBO ("VICE News Tonight") and at the same time rebuilt ViceNews.com. The three design leads were the org's 4th–6th hires, brought on to develop the show's format and visual language during the five-month build before the rest of the ~100-person newsroom assembled. Once we shipped, I directed and designed daily for the next two years alongside our animators, editors, and producers. ### Awards - *Society for News Design 39* — three awards (2017) - *Society for News Design 38* (2016) - *Motion Awards* — News Graphics (2016) ## Working conditions In 2015–17, the broadcast-news graphics norm was busy and ornamental. We brought a modern-minimalist visual approach rooted in the foundations of graphic design — quieter than the field around it at the time. Visual approaches like it have since become more common across video news. The design team's desks were next to the show's leadership — showrunner, managing executive producer, head of writing, executive editor of the web division, lead producers, head of ops — and the daily work was as much negotiation as design. Producers, editors, and correspondents brought story after story to the design team, each one urgent and well-reported. The ongoing job was finding the win-win that served the story while keeping the design team solvent across a continuous nightly deadline. The two-year record was high-quality graphics on a tight nightly clock with a stable design team behind them. ## Logo system ![VICE News wordmark](/legacy/vice/images/logos/logo--vice_news_vice_news.svg) ![VICE News wordmark — white on dark](/legacy/vice/images/logos/logo--vice_news_vice_news-white.svg) ![VICE News wordmark — white, stacked lockup](/legacy/vice/images/logos/logo--vice_news_vice_news-white-stacked.svg) ![VICE News Tonight wordmark](/legacy/vice/images/logos/logo--vice_news_vice_news_tonight.svg) ![ViceNews.com wordmark](/legacy/vice/images/logos/logo--vice_news_vice_news_dot_com.svg) ## Site and broadcast integration comps Cross-surface design system explorations — type, grid, and motion sharing the same visual language across broadcast and web. ![Site integration comp — typography](/legacy/vice/images/integration/yg-vice-site-integration-comp-170808--type.jpg) ![Site integration comp — grid](/legacy/vice/images/integration/yg-vice-site-integration-comp-170808--grid.jpg) ![Site integration comp — motion](/legacy/vice/images/integration/yg-vice-site-integration-comp-170808--motion.jpg) ## Wireframes ![ViceNews.com wireframe](/legacy/vice/images/diagram/yg-vice_combo-170811-500-wireframes-12.svg) ![ViceNews.com wireframe](/legacy/vice/images/diagram/yg-vice_combo-170811-500-wireframes-13.svg) ![ViceNews.com wireframe](/legacy/vice/images/diagram/yg-vice_combo-170811-500-wireframes-14.svg) ![ViceNews.com wireframe](/legacy/vice/images/diagram/yg-vice_combo-170811-500-wireframes-15.svg) ![ViceNews.com wireframe](/legacy/vice/images/diagram/yg-vice_combo-170811-500-wireframes-16.svg) ## Broadcast — VICE News Tonight Module titling, class intros and transitions, function modules used for explainer segments — the on-air template system the show ran on every weeknight. ![Module titling](/legacy/vice/videos/yg-vnt-170804-modules-titling2_1.mp4) ![Class intros — template](/legacy/vice/videos/yg-vnt-170805-0051-class-intros_1.mp4) ![Class intros — Italy referendum segment](/legacy/vice/videos/yg-vnt-170805-0051-class-intros--italy_referendum_1.mp4) ![Class transitions](/legacy/vice/videos/yg-vnt-170805-0107-class-transitions_1.mp4) ![Function emphasis — Grizzy segment](/legacy/vice/videos/yg-vnt-170805-0233-function-emphasis--grizzy_1.mp4) ![Function persistence](/legacy/vice/videos/yg-vnt-170805-function-persistence_1.mp4) ![Functions and artifacts](/legacy/vice/videos/yg-vnt-170808-0149-functions-artifacts_1.mp4) ![Function explanation — gerrymandering segment](/legacy/vice/videos/yg-vnt-170808-0159-function-explanation--gerrymandering_1.mp4) ![Function explanation — Facebook mods segment](/legacy/vice/videos/yg-vnt-170808-0159-function-explanatino--facebook_mods2b_1.mp4) ![Brexit timeline — stream-to-graphics transition](/legacy/vice/videos/brexit_timeline_stream-gfx_transition-170123-1749-kc.mp4) ![Combo marquee — show + web](/legacy/vice/videos/yg-vice_combo-marquee_video-170817-1650.mp4) ![Cover composition — broadcast](/legacy/vice/videos/vice-cover-181106-1459.mp4) ## Web — ViceNews.com Story-cover animations, mobile batch-stream and batch-video patterns, the cover builder and cover-comp tools. ![ViceNews.com — story animations](/legacy/vice/videos/yg-vn_site-170807-1124-recording-animations-05br_1.mp4) ![ViceNews.com — story animations, cropped](/legacy/vice/videos/yg-vn_site-170807-1124-recording-animations-1br--cropped_2.mp4) ![ViceNews.com — mobile batch-stream pattern](/legacy/vice/videos/yg-vn_site-170808-0006-recording-mobile_batch-stream_general_1-08mbps.mp4) ![ViceNews.com — mobile batch-video pattern](/legacy/vice/videos/yg-vn_site-170808-0006-recording-mobile_batch-videos_1--05br.mp4) ![ViceNews.com — cover composition](/legacy/vice/videos/yg-vn_site-170809-1246-cover_comp_1-05br.mp4) ![ViceNews.com — cover builder](/legacy/vice/images/yg-vn_site-170808-0048-cover_builder-gif.gif) ![ViceNews.com — recording test](/legacy/vice/images/yg-vn_site-recording-test2-full.mp4) ## On-air graphic library A working library of the broadcast template families the team ran. Each category is one of the visual grammars the show's on-air system supplied to a producer's story. ### Charts ![Border towns chart](/legacy/vice/images/parts/charts/0299-border_towns_0005_Layer%206.jpg) ![Afghanistan 15 years chart](/legacy/vice/images/parts/charts/0304-afghanistan_15_yrs_0006_Layer%202.jpg) ![Carfentanyl Ohio chart](/legacy/vice/images/parts/charts/0310-carfentanyl_ohio_0005_Layer%201.jpg) ![South Africa student protests chart](/legacy/vice/images/parts/charts/0436-south_africa_student.jpg) ![Brexit poll chart](/legacy/vice/images/parts/charts/0448-but_first_brexit_poll_0001_Layer%201.jpg) ![Ohio non-voter chart](/legacy/vice/images/parts/charts/0471-ohio_non_voter.jpg) ![Presidential election recount chart](/legacy/vice/images/parts/charts/0534-presidential_election_recount_0002_Layer%205.jpg) ![VNT modules — icon set](/legacy/vice/images/parts/charts/vnt-modules-icons--small.png) ### Maps ![Gerrymandering map](/legacy/vice/images/parts/maps/0283-gerrymandering_0009_Layer%201.jpg) ![Border towns map](/legacy/vice/images/parts/maps/0299-border_towns_0008_Layer%203.jpg) ![Afghanistan 15 years map](/legacy/vice/images/parts/maps/0304-afghanistan_15_yrs_0004_Layer%204.jpg) ![Tangier map](/legacy/vice/images/parts/maps/0305-tangier_0003_Layer%201.jpg) ![Gitmo guards map](/legacy/vice/images/parts/maps/0356-gitmo_guards_0002_Layer%202.jpg) ![Chemicals map](/legacy/vice/images/parts/maps/0447-chemicals_0001_Layer%202.jpg) ![Trump field report map](/legacy/vice/images/parts/maps/0452-trump_field_report.jpg) ![End of coffee map](/legacy/vice/images/parts/maps/0525-end_of_coffee_0002_Layer%201.jpg) ![Dallas eviction map](/legacy/vice/images/parts/maps/0530-dallas_eviction.png) ### Big numbers ![Police recruitment big-number module](/legacy/vice/images/parts/big_numbers/0227-police_recruitment_0003_Layer%203.jpg) ![Iraq refugees big-number module](/legacy/vice/images/parts/big_numbers/0409-iraq_refugees_0000_Layer%203.jpg) ![Arizona weed big-number module](/legacy/vice/images/parts/big_numbers/0428-arizona_weed_0000_Layer%208.jpg) ![Arizona weed big-number module](/legacy/vice/images/parts/big_numbers/0428-arizona_weed_0007_Layer%201.jpg) ![Executive orders big-number module](/legacy/vice/images/parts/big_numbers/0502-executive_orders_0002_Layer%206.jpg) ![Executive orders big-number module](/legacy/vice/images/parts/big_numbers/0502-executive_orders_0004_Layer%204.jpg) ![Executive orders big-number module](/legacy/vice/images/parts/big_numbers/0502-executive_orders_0005_Layer%203.jpg) ### Headlines ![WeLive headline module](/legacy/vice/images/parts/headlines/0232-welive_0001_Layer%202.jpg) ![FIFA diversity headline module](/legacy/vice/images/parts/headlines/0239-fifa_diversity_0000_Layer%202.jpg) ![California recycling headline module](/legacy/vice/images/parts/headlines/0259-ca_recycling.jpg) ![Amanda Nguyen headline module](/legacy/vice/images/parts/headlines/0277-amanda_nguyen_0000_Layer%202.jpg) ![VidAngel headline module](/legacy/vice/images/parts/headlines/0395-vidangel_0000_Layer%204.jpg) ![Obama accomplishments headline module](/legacy/vice/images/parts/headlines/0408-obama_accomplishments.jpg) ![ACA Nov 1st headline module](/legacy/vice/images/parts/headlines/0424-ACA-nov1st_0013_Layer%203.jpg) ### Timelines ![Hoodies timeline](/legacy/vice/images/parts/timelines/0371-hoodies_0002_Layer%2014.jpg) ![Hoodies timeline](/legacy/vice/images/parts/timelines/0371-hoodies_0005_Layer%2011.jpg) ![Hoodies timeline](/legacy/vice/images/parts/timelines/0371-hoodies_0006_Layer%2010.jpg) ![Hoodies timeline](/legacy/vice/images/parts/timelines/0371-hoodies_0013_Layer%203.jpg) ![Trump trials timeline](/legacy/vice/images/parts/timelines/0519-trump_trials_0005_Layer%2010.jpg) ### Document callouts ![ACA Obama legacy document callout](/legacy/vice/images/parts/docs/0252-aca_obama_legacy_0004_Layer%203.jpg) ![ACA Obama legacy document callout](/legacy/vice/images/parts/docs/0252-aca_obama_legacy_0005_Layer%202.jpg) ![Wells Fargo scoop document callout](/legacy/vice/images/parts/docs/0317-wells_fargo_scoop_0010_Layer%206.jpg) ![Consensus Fenda document callout](/legacy/vice/images/parts/docs/0324-consensus_fenda_0014_Layer%203.jpg) ![Executive orders document callout](/legacy/vice/images/parts/docs/0502-executive_orders_0001_Layer%207.jpg) ![Veterans bad papers document callout](/legacy/vice/images/parts/docs/0541-vets_bad_papers_0002_Layer%2013.jpg) ![Trump Carrier document callout](/legacy/vice/images/parts/docs/0551-in_trump_carrier_0001_Layer%203.jpg) ### Annotations ![Wells Fargo annotation](/legacy/vice/images/parts/annotations/0262-wells_fargo_0000_Layer%205.jpg) ![Wells Fargo annotation](/legacy/vice/images/parts/annotations/0262-wells_fargo_0001_Layer%204.jpg) ### Highlights ![Assault rifles highlight](/legacy/vice/images/parts/highlights/0279-assault_rifles_0004_Layer%202.jpg) ![Milo highlight](/legacy/vice/images/parts/highlights/0346-milo_0004_Layer%202.jpg) ![Dorothy's shoes — Smithsonian highlight](/legacy/vice/images/parts/highlights/0368-dorothys_shoes_smithsonian_0000_Layer%203.jpg) ### Slideshows ![Iraq refugees slideshow frame](/legacy/vice/images/parts/slidehows/0409-iraq_refugees_0000_Layer%203.jpg) ![ACA Nov 1st slideshow frame](/legacy/vice/images/parts/slidehows/0424-ACA-nov1st_0015_Layer%201.jpg) ### Sidebars ![On-air sidebar module](/legacy/vice/images/parts/sidebars/VICE_NEWS_PACKAGE_170202-1945.01_01_23_11.Still002.png) ![On-air sidebar module](/legacy/vice/images/parts/sidebars/sidebar.png) ![On-air sidebar module — still](/legacy/vice/images/parts/sidebars/vlcsnap-2017-08-06-00h02m45s646.png) ![On-air sidebar module — still](/legacy/vice/images/parts/sidebars/vlcsnap-2017-08-06-00h04m31s762.png) ### Correspondent headshots Template for the show's correspondent-introduction graphic. ![Correspondent headshot](/legacy/vice/images/parts/headshots/newyork_d33f81d0_r1.jpg) ![Correspondent headshot](/legacy/vice/images/parts/headshots/newyork_d33f8380_r1.jpg) ![Correspondent headshot](/legacy/vice/images/parts/headshots/newyork_d33fc67e_r1.jpg) ![Correspondent headshot](/legacy/vice/images/parts/headshots/newyork_d340501d_r1.jpg) ![Correspondent headshot](/legacy/vice/images/parts/headshots/newyork_d3405063_r1.jpg) ![Correspondent headshot](/legacy/vice/images/parts/headshots/newyork_d3405323_r1.jpg) ![Correspondent headshot](/legacy/vice/images/parts/headshots/newyork_d34099b4_r1.jpg) ![Correspondent headshot](/legacy/vice/images/parts/headshots/newyork_d34376ad_r1.jpg) ![Correspondent headshot](/legacy/vice/images/parts/headshots/newyork_d343994c_r1.jpg) ![Correspondent headshot](/legacy/vice/images/parts/headshots/unnamed.png) ![Correspondent headshot](/legacy/vice/images/parts/headshots/unnamed-1.png) --- [Overview](/llms.txt) · [All work](/) · [About](/about)