HOW FORBES DESIGNS WEB STORIES

[{"selector":"#anim-052f249d-f22d-4a3b-a74e-c42177dd8594","keyframes":{"transform":["translate3d(-152.41935%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bb748bee-a0b0-4369-b745-13a405fed802","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c2a82bd3-ec0b-416b-9da8-a4a38edbceaf","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-2bf84d45-11b6-45ca-adf0-750ae4bfa3c6","keyframes":{"transform":["translate3d(153.27869%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":200,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a710038e-24d2-40ad-841b-52cc2ab99998","keyframes":{"opacity":[0,1]},"delay":200,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2ad58fcc-cd98-4370-9d8c-4ca9069ccdc5","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":200,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-b0547f2d-e4de-4a25-9faa-edb9820e0663","keyframes":{"transform":["translate3d(-154.91805%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":400,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-572e4392-225a-4c1f-b83e-15ca0afaa042","keyframes":{"opacity":[0,1]},"delay":400,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5a075f8a-31ff-4718-af3e-d33e9afd5549","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":400,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-1d6b565f-8a24-440e-8000-030408bfc526","keyframes":{"transform":["translate3d(153.27869%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":600,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9ab8fd1f-cf32-4288-ba1f-0fa9234ff21c","keyframes":{"opacity":[0,1]},"delay":600,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-962d49af-4ef8-41b3-8441-e2c767df2a03","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":600,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] WITH ALICIA HALLET-CHAN

THIS IS ALICIA HALLET-CHAN

HOW DO YOU PRODUCE WEB STORIES AT FORBES

[{"selector":"#anim-556ae074-0381-4544-a022-bd56796a924d","keyframes":[{"offset":0,"transform":"translate3d(0, -220.07937%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.29,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.45,"transform":"translate3d(0, -61.886318844%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.61,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.71,"transform":"translate3d(0, -21.039587772%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.8,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.85,"transform":"translate3d(0, -7.900849383000001%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.92,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.96,"transform":"translate3d(0, -3.433238172%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":1,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"}],"delay":0,"duration":1600,"fill":"both"}]

Stories are produced two weeks in advance.

WHAT KIND OF IMAGES DO YOU SELECT FOR THE COVER PAGES

[{"selector":"#anim-13ecb37c-5462-43c9-9017-19b4be57eeb1","keyframes":[{"offset":0,"transform":"translate3d(0, -247.93652%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.29,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.45,"transform":"translate3d(0, -69.719749424%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.61,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.71,"transform":"translate3d(0, -23.702731312%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.8,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.85,"transform":"translate3d(0, -8.900921068%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.92,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.96,"transform":"translate3d(0, -3.8678097119999997%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":1,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"}],"delay":0,"duration":1600,"fill":"both"}]

3 KEY GUIDELINES

1. Keep it simple

HOW DO THE STORY POSTER AND THE COVER PAGE RELATE

[{"selector":"#anim-28a9fc08-3dd0-4178-8592-02733555bc3f","keyframes":[{"offset":0,"transform":"translate3d(0, -251.50794%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.29,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.45,"transform":"translate3d(0, -70.724032728%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.61,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.71,"transform":"translate3d(0, -24.044159064%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.8,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.85,"transform":"translate3d(0, -9.029135046%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.92,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.96,"transform":"translate3d(0, -3.923523864%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":1,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"}],"delay":0,"duration":1600,"fill":"both"}]

POSTER VS COVER PAGE

CAN YOU SHARE AN EXAMPLE OF A GREAT COVER

[{"selector":"#anim-397cdb82-84bb-4f5e-9fb0-cb3ed9b62147","keyframes":[{"offset":0,"transform":"translate3d(0, -236.50796%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.29,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.45,"transform":"translate3d(0, -66.506038352%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.61,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.71,"transform":"translate3d(0, -22.610160976%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.8,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.85,"transform":"translate3d(0, -8.490635764%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.92,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.96,"transform":"translate3d(0, -3.689524176%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":1,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"}],"delay":0,"duration":1600,"fill":"both"}]

Clean & simple

WATCH THE WHOLE INTERVIEW ON YOUTUBE.

Subscribe for more.

Rewatch this Web Story on YouTube. Subscribe to the blog & channel for the latest and greatest. VISIT NOW

HOW FORBES DESIGNS WEB STORIES

THIS IS ALICIA HALLET-CHAN

Design Director, Forbes

She is responsible for the look of everything digital and printed

HOW DO YOU PRODUCE WEB STORIES AT FORBES

?

Stories are produced two weeks in advance.

Stories are published daily.

Team consists of a creative lead, editor, writer, video editor, designer, animator & photo researcher

WHAT KIND OF IMAGES DO YOU SELECT FOR THE COVER PAGES

?

3 KEY GUIDELINES

1. Keep it simple

2. Make a connection

3. Be authentic

FORBES' COVER GUIDELINES

HOW DO THE STORY POSTER AND THE COVER PAGE RELATE

?

POSTER VS COVER PAGE

Unify poster and cover images.

Animated cover? Try to select a representative moment for the poster.

CAN YOU SHARE AN EXAMPLE OF A GREAT COVER

?

Clean & simple

Clear headline

True to the Forbes brand

WHY IS IT GREAT?

WATCH THE WHOLE INTERVIEW ON YOUTUBE.

Subscribe for more.