<div class="PenguinDisplayCase">
    <div class="PenguinDisplayCase-wrapper">

        <img class="PenguinDisplayCase-chimney" src="/assets/img/work/penguin/display-case/header.png" alt="Channel 4 website screen shots">

        <div class="TextBlock TextBlock--author Prose">
            <div class="TextBlock-author">
                <div class="Author">
                    <img class="Author-image" src="/assets/img/team/voice/ben-white.png" alt="Ben White">
                    <div class="Heading Heading--context">Ben White</div>
                </div>
                <!--/.Author-->
            </div>

            <h2>How do you adapt the brand to digital, remaining faithful to the Penguin brand and sensitive to hundreds of sub-brands?</h2>
            <p>When it came to the brand, we were pushing Penguin into unchartered waters, places the brand guidelines didn’t cover. The design language would be used to in places where the Penguin is secondary to another brand (e.g. Jamie Oliver, or Puffin).</p>
            <p>We agonised over the typography. Although there were brand guidelines, we didn’t feel they had a universal feel. Our choice of Bliss and Fort reflects this idea. We built throwaway HTML responsive prototypes, to see what our suggested design
                language looked like on a variety of devices.</p>

            <div class="PenguinDisplayFont-wrapper">
                <div class="PenguinDisplayFont PenguinDisplayFont--left">
                    <img src="/assets/img/work/penguin/display-case/Aa-Bliss-speciman.svg" alt="Fort Book">
                    <img src="/assets/img/work/penguin/display-case/Aa-bliss-bold.svg" alt="Bliss Bold">
                </div>

                <div class="PenguinDisplayFont PenguinDisplayFont--right">
                    <img src="/assets/img/work/penguin/display-case/Aa-Fort-speciman.svg" alt="Fort Book">
                    <img src="/assets/img/work/penguin/display-case/Aa-fort-book.svg" alt="Bliss Bold">
                </div>
            </div>

            <p>After much experimentation and testing with other brands, the result is the sidebar shown below. It gives some implicit consistency across the Penguin universe, while allowing other brands to express themselves. A user might unconsciously
                know that the brands were part of a universe, even if the colour and logo were different.</p>
        </div>
        <!--/.TextBlock Prose-->

        <div class="PenguinDisplayCase-example1">
            <img src="https://clearleft-v5.s3.amazonaws.com/uploads/prh-fan.png" alt="">
        </div>

        <div class="PenguinDisplayCase-example2">
            <img src="https://clearleft-v5.s3.amazonaws.com/uploads/prh-11.png" alt="">
        </div>

        <blockquote class="Quote">
            "Traditionally, digital has been commissioned in silos across the organisation. By hiring Clearleft, we've gained a vision of how we should all work together."
            <div class="Quote-citation">
                <img class="Quote-avatar" src="/assets/img/work/penguin/display-case/john-salt.jpg" alt="">
                <span>Jon Salt, <span class="Quote-job">Head of Digital, Penguin.co.uk</span></span>
            </div>
            <!--/.Quote-citation-->
        </blockquote>
        <!--/.Quote-->

    </div>
    <!--/.DisplayCase-wrapper-->
</div>
<!--/.DisplayCase-->
<div class="PenguinDisplayCase">
    <div class="PenguinDisplayCase-wrapper">

        <img class="PenguinDisplayCase-chimney" src="/assets/img/work/penguin/display-case/header.png" alt="Channel 4 website screen shots">

        <div class="TextBlock TextBlock--author Prose">
            <div class="TextBlock-author">
                <div class="Author">
                    <img class="Author-image" src="/assets/img/team/voice/ben-white.png" alt="Ben White">
                    <div class="Heading Heading--context">Ben White</div>
                </div>
                <!--/.Author-->
            </div>

            <h2>How do you adapt the brand to digital, remaining faithful to the Penguin brand and sensitive to hundreds of sub-brands?</h2>
            <p>When it came to the brand, we were pushing Penguin into unchartered waters, places the brand guidelines didn’t cover. The design language would be used to in places where the Penguin is secondary to another brand (e.g. Jamie Oliver, or Puffin).</p>
            <p>We agonised over the typography. Although there were brand guidelines, we didn’t feel they had a universal feel. Our choice of Bliss and Fort reflects this idea. We built throwaway HTML responsive prototypes, to see what our suggested design language looked like on a variety of devices.</p>

            <div class="PenguinDisplayFont-wrapper">
                <div class="PenguinDisplayFont PenguinDisplayFont--left">
                    <img src="/assets/img/work/penguin/display-case/Aa-Bliss-speciman.svg" alt="Fort Book">
                    <img src="/assets/img/work/penguin/display-case/Aa-bliss-bold.svg" alt="Bliss Bold">
                </div>

                <div class="PenguinDisplayFont PenguinDisplayFont--right">
                    <img src="/assets/img/work/penguin/display-case/Aa-Fort-speciman.svg" alt="Fort Book">
                    <img src="/assets/img/work/penguin/display-case/Aa-fort-book.svg" alt="Bliss Bold">
                </div>
            </div>

            <p>After much experimentation and testing with other brands, the result is the sidebar shown below. It gives some implicit consistency across the Penguin universe, while allowing other brands to express themselves. A user might unconsciously know that the brands were part of a universe, even if the colour and logo were different.</p>
        </div>
        <!--/.TextBlock Prose-->

        <div class="PenguinDisplayCase-example1">
            <img src="https://clearleft-v5.s3.amazonaws.com/uploads/prh-fan.png" alt="">
        </div>

        <div class="PenguinDisplayCase-example2">
            <img src="https://clearleft-v5.s3.amazonaws.com/uploads/prh-11.png" alt="">
        </div>

        <blockquote class="Quote">
            "Traditionally, digital has been commissioned in silos across the organisation. By hiring Clearleft, we've gained a vision of how we should all work together."
            <div class="Quote-citation">
                <img class="Quote-avatar" src="/assets/img/work/penguin/display-case/john-salt.jpg" alt="{{quoteAvatarAlt}}">
                <span>Jon Salt, <span class="Quote-job">Head of Digital, Penguin.co.uk</span></span>
            </div><!--/.Quote-citation-->
        </blockquote><!--/.Quote-->

    </div><!--/.DisplayCase-wrapper-->
</div><!--/.DisplayCase-->
/* No context defined for this component. */

There are no notes for this item.