{"id":74310,"date":"2025-03-03T23:49:55","date_gmt":"2025-03-03T12:49:55","guid":{"rendered":"https:\/\/elements.blog-cms.envato.net\/?p=59118"},"modified":"2026-03-20T17:46:18","modified_gmt":"2026-03-20T06:46:18","slug":"movie-poster-design-web-designers","status":"publish","type":"post","link":"https:\/\/elements.envato.com\/learn\/movie-poster-design-web-designers","title":{"rendered":"Down in front! What movie poster design can teach web designers"},"content":{"rendered":"\n<p>What do you see when you look at a movie poster? Is it simply advertising to promote a movie or a piece of artwork you\u2019d potentially hang on your wall at home or in an office?<\/p>\n\n\n\n<p>The best film posters are more than promotional materials. They\u2019re a fusion of art and marketing crafted to convey the essence of a film and captivate a potential audience. The art of movie poster design is all about telling memorable stories.<\/p>\n\n\n\n<p>Web designers can draw inspiration from <a href=\"https:\/\/elements.envato.com\/learn\/how-streaming-changed-movie-posters\" target=\"_blank\" rel=\"noreferrer noopener\">movie poster design<\/a> to engage audiences, tell incredible stories, and help a brand, business, product, or service create a lasting impression. I love movies and their posters almost as much as designing websites. Let\u2019s explore the connections between these two mediums and discuss how poster design principles add energy and excitement to product and website designs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Movie posters pack a punch<\/h2>\n\n\n\n<p>Great movie posters pack a visual punch. They&#8217;re designed to attract attention and encourage audiences to learn more about the films they promote.<\/p>\n\n\n\n<p>From the eerie silhouette on <em>Rosemary\u2019s Baby<\/em> (1968) to the wall-breaking composition of <em>A Clockwork Orange<\/em> (1973), posters can excite and intrigue at a glance. Their power comes from an ability to condense complex narratives into eye-catching visuals. Focusing on impact and efficiency can also help product and website designers to create more impactful and memorable designs.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-rich is-provider-instagram wp-block-embed-instagram\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"instagram-media\" data-instgrm-captioned data-instgrm-permalink=\"https:\/\/www.instagram.com\/p\/Ba7kqnCDFoQ\/?utm_source=ig_embed&amp;utm_campaign=loading\" data-instgrm-version=\"14\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:500px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"><div style=\"padding:16px;\"> <a href=\"https:\/\/www.instagram.com\/p\/Ba7kqnCDFoQ\/?utm_source=ig_embed&amp;utm_campaign=loading\" style=\" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;\" target=\"_blank\" rel=\"noopener\"> <div style=\" display: flex; flex-direction: row; align-items: center;\"> <div style=\"background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;\"><\/div> <div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center;\"> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;\"><\/div> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;\"><\/div><\/div><\/div><div style=\"padding: 19% 0;\"><\/div> <div style=\"display:block; height:50px; margin:0 auto 12px; width:50px;\"><svg width=\"50px\" height=\"50px\" viewBox=\"0 0 60 60\" version=\"1.1\" xmlns=\"https:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"https:\/\/www.w3.org\/1999\/xlink\"><g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g transform=\"translate(-511.000000, -20.000000)\" fill=\"#000000\"><g><path d=\"M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631\"><\/path><\/g><\/g><\/g><\/svg><\/div><div style=\"padding-top: 8px;\"> <div style=\" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;\">View this post on Instagram<\/div><\/div><div style=\"padding: 12.5% 0;\"><\/div> <div style=\"display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;\"><div> <div style=\"background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);\"><\/div> <div style=\"background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;\"><\/div> <div style=\"background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);\"><\/div><\/div><div style=\"margin-left: 8px;\"> <div style=\" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;\"><\/div> <div style=\" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)\"><\/div><\/div><div style=\"margin-left: auto;\"> <div style=\" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);\"><\/div> <div style=\" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);\"><\/div> <div style=\" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);\"><\/div><\/div><\/div> <div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;\"> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;\"><\/div> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;\"><\/div><\/div><\/a><\/div><\/blockquote><script async src=\"\/\/platform.instagram.com\/en_US\/embeds.js\"><\/script>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-rich is-provider-instagram wp-block-embed-instagram\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"instagram-media\" data-instgrm-captioned data-instgrm-permalink=\"https:\/\/www.instagram.com\/p\/CZNFmGmF2nT\/?utm_source=ig_embed&amp;utm_campaign=loading\" data-instgrm-version=\"14\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:500px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"><div style=\"padding:16px;\"> <a href=\"https:\/\/www.instagram.com\/p\/CZNFmGmF2nT\/?utm_source=ig_embed&amp;utm_campaign=loading\" style=\" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;\" target=\"_blank\" rel=\"noopener\"> <div style=\" display: flex; flex-direction: row; align-items: center;\"> <div style=\"background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;\"><\/div> <div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center;\"> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;\"><\/div> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;\"><\/div><\/div><\/div><div style=\"padding: 19% 0;\"><\/div> <div style=\"display:block; height:50px; margin:0 auto 12px; width:50px;\"><svg width=\"50px\" height=\"50px\" viewBox=\"0 0 60 60\" version=\"1.1\" xmlns=\"https:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"https:\/\/www.w3.org\/1999\/xlink\"><g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g transform=\"translate(-511.000000, -20.000000)\" fill=\"#000000\"><g><path d=\"M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631\"><\/path><\/g><\/g><\/g><\/svg><\/div><div style=\"padding-top: 8px;\"> <div style=\" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;\">View this post on Instagram<\/div><\/div><div style=\"padding: 12.5% 0;\"><\/div> <div style=\"display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;\"><div> <div style=\"background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);\"><\/div> <div style=\"background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;\"><\/div> <div style=\"background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);\"><\/div><\/div><div style=\"margin-left: 8px;\"> <div style=\" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;\"><\/div> <div style=\" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)\"><\/div><\/div><div style=\"margin-left: auto;\"> <div style=\" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);\"><\/div> <div style=\" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);\"><\/div> <div style=\" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);\"><\/div><\/div><\/div> <div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;\"> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;\"><\/div> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;\"><\/div><\/div><\/a><\/div><\/blockquote><script async src=\"\/\/platform.instagram.com\/en_US\/embeds.js\"><\/script>\n<\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>The best movie posters are masterclasses in <a href=\"https:\/\/elements.envato.com\/learn\/brand-color-palette\" target=\"_blank\" rel=\"noreferrer noopener\">design communication using color<\/a>, imagery, layout, and typography.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Movie poster typography takes center stage<\/h2>\n\n\n\n<p>Typography conveys tone, from the hand-drawn lettering on <a href=\"https:\/\/elements.envato.com\/learn\/saul-bass-design\">Saul Bass<\/a>\u2019s poster for <em>Vertigo<\/em> (1958) to the vintage paperback type on <em>Pulp Fiction<\/em> (1994.)<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-rich is-provider-instagram wp-block-embed-instagram\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"instagram-media\" data-instgrm-captioned data-instgrm-permalink=\"https:\/\/www.instagram.com\/p\/CD_f8_WsQ92\/?utm_source=ig_embed&amp;utm_campaign=loading\" data-instgrm-version=\"14\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:500px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"><div style=\"padding:16px;\"> <a href=\"https:\/\/www.instagram.com\/p\/CD_f8_WsQ92\/?utm_source=ig_embed&amp;utm_campaign=loading\" style=\" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;\" target=\"_blank\" rel=\"noopener\"> <div style=\" display: flex; flex-direction: row; align-items: center;\"> <div style=\"background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;\"><\/div> <div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center;\"> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;\"><\/div> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;\"><\/div><\/div><\/div><div style=\"padding: 19% 0;\"><\/div> <div style=\"display:block; height:50px; margin:0 auto 12px; width:50px;\"><svg width=\"50px\" height=\"50px\" viewBox=\"0 0 60 60\" version=\"1.1\" xmlns=\"https:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"https:\/\/www.w3.org\/1999\/xlink\"><g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g transform=\"translate(-511.000000, -20.000000)\" fill=\"#000000\"><g><path d=\"M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631\"><\/path><\/g><\/g><\/g><\/svg><\/div><div style=\"padding-top: 8px;\"> <div style=\" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;\">View this post on Instagram<\/div><\/div><div style=\"padding: 12.5% 0;\"><\/div> <div style=\"display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;\"><div> <div style=\"background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);\"><\/div> <div style=\"background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;\"><\/div> <div style=\"background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);\"><\/div><\/div><div style=\"margin-left: 8px;\"> <div style=\" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;\"><\/div> <div style=\" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)\"><\/div><\/div><div style=\"margin-left: auto;\"> <div style=\" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);\"><\/div> <div style=\" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);\"><\/div> <div style=\" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);\"><\/div><\/div><\/div> <div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;\"> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;\"><\/div> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;\"><\/div><\/div><\/a><\/div><\/blockquote><script async src=\"\/\/platform.instagram.com\/en_US\/embeds.js\"><\/script>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-rich is-provider-instagram wp-block-embed-instagram\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"instagram-media\" data-instgrm-captioned data-instgrm-permalink=\"https:\/\/www.instagram.com\/p\/CkEf1IKjKCj\/?utm_source=ig_embed&amp;utm_campaign=loading\" data-instgrm-version=\"14\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:500px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"><div style=\"padding:16px;\"> <a href=\"https:\/\/www.instagram.com\/p\/CkEf1IKjKCj\/?utm_source=ig_embed&amp;utm_campaign=loading\" style=\" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;\" target=\"_blank\" rel=\"noopener\"> <div style=\" display: flex; flex-direction: row; align-items: center;\"> <div style=\"background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;\"><\/div> <div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center;\"> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;\"><\/div> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;\"><\/div><\/div><\/div><div style=\"padding: 19% 0;\"><\/div> <div style=\"display:block; height:50px; margin:0 auto 12px; width:50px;\"><svg width=\"50px\" height=\"50px\" viewBox=\"0 0 60 60\" version=\"1.1\" xmlns=\"https:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"https:\/\/www.w3.org\/1999\/xlink\"><g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g transform=\"translate(-511.000000, -20.000000)\" fill=\"#000000\"><g><path d=\"M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631\"><\/path><\/g><\/g><\/g><\/svg><\/div><div style=\"padding-top: 8px;\"> <div style=\" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;\">View this post on Instagram<\/div><\/div><div style=\"padding: 12.5% 0;\"><\/div> <div style=\"display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;\"><div> <div style=\"background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);\"><\/div> <div style=\"background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;\"><\/div> <div style=\"background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);\"><\/div><\/div><div style=\"margin-left: 8px;\"> <div style=\" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;\"><\/div> <div style=\" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)\"><\/div><\/div><div style=\"margin-left: auto;\"> <div style=\" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);\"><\/div> <div style=\" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);\"><\/div> <div style=\" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);\"><\/div><\/div><\/div> <div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;\"> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;\"><\/div> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;\"><\/div><\/div><\/a><\/div><\/blockquote><script async src=\"\/\/platform.instagram.com\/en_US\/embeds.js\"><\/script>\n<\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>The typography on movie posters is frequently daring and designed to leave lasting impressions. Think of the skyline-shaped word mark from <em>Manhattan<\/em> or the dog tags in the <em>Platoon<\/em> title. This creative approach can translate to a website\u2019s headings and banners. Typography is more than text and should be a core ingredient defining a website\u2019s tone, just like a film poster\u2019s branding.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-rich is-provider-instagram wp-block-embed-instagram\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"instagram-media\" data-instgrm-captioned data-instgrm-permalink=\"https:\/\/www.instagram.com\/p\/CVZrQhZh-PU\/?utm_source=ig_embed&amp;utm_campaign=loading\" data-instgrm-version=\"14\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:500px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"><div style=\"padding:16px;\"> <a href=\"https:\/\/www.instagram.com\/p\/CVZrQhZh-PU\/?utm_source=ig_embed&amp;utm_campaign=loading\" style=\" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;\" target=\"_blank\" rel=\"noopener\"> <div style=\" display: flex; flex-direction: row; align-items: center;\"> <div style=\"background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;\"><\/div> <div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center;\"> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;\"><\/div> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;\"><\/div><\/div><\/div><div style=\"padding: 19% 0;\"><\/div> <div style=\"display:block; height:50px; margin:0 auto 12px; width:50px;\"><svg width=\"50px\" height=\"50px\" viewBox=\"0 0 60 60\" version=\"1.1\" xmlns=\"https:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"https:\/\/www.w3.org\/1999\/xlink\"><g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g transform=\"translate(-511.000000, -20.000000)\" fill=\"#000000\"><g><path d=\"M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631\"><\/path><\/g><\/g><\/g><\/svg><\/div><div style=\"padding-top: 8px;\"> <div style=\" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;\">View this post on Instagram<\/div><\/div><div style=\"padding: 12.5% 0;\"><\/div> <div style=\"display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;\"><div> <div style=\"background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);\"><\/div> <div style=\"background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;\"><\/div> <div style=\"background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);\"><\/div><\/div><div style=\"margin-left: 8px;\"> <div style=\" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;\"><\/div> <div style=\" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)\"><\/div><\/div><div style=\"margin-left: auto;\"> <div style=\" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);\"><\/div> <div style=\" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);\"><\/div> <div style=\" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);\"><\/div><\/div><\/div> <div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;\"> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;\"><\/div> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;\"><\/div><\/div><\/a><\/div><\/blockquote><script async src=\"\/\/platform.instagram.com\/en_US\/embeds.js\"><\/script>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-rich is-provider-instagram wp-block-embed-instagram\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"instagram-media\" data-instgrm-captioned data-instgrm-permalink=\"https:\/\/www.instagram.com\/p\/CvU6QE_t5QW\/?utm_source=ig_embed&amp;utm_campaign=loading\" data-instgrm-version=\"14\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:500px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"><div style=\"padding:16px;\"> <a href=\"https:\/\/www.instagram.com\/p\/CvU6QE_t5QW\/?utm_source=ig_embed&amp;utm_campaign=loading\" style=\" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;\" target=\"_blank\" rel=\"noopener\"> <div style=\" display: flex; flex-direction: row; align-items: center;\"> <div style=\"background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;\"><\/div> <div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center;\"> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;\"><\/div> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;\"><\/div><\/div><\/div><div style=\"padding: 19% 0;\"><\/div> <div style=\"display:block; height:50px; margin:0 auto 12px; width:50px;\"><svg width=\"50px\" height=\"50px\" viewBox=\"0 0 60 60\" version=\"1.1\" xmlns=\"https:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"https:\/\/www.w3.org\/1999\/xlink\"><g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g transform=\"translate(-511.000000, -20.000000)\" fill=\"#000000\"><g><path d=\"M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631\"><\/path><\/g><\/g><\/g><\/svg><\/div><div style=\"padding-top: 8px;\"> <div style=\" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;\">View this post on Instagram<\/div><\/div><div style=\"padding: 12.5% 0;\"><\/div> <div style=\"display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;\"><div> <div style=\"background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);\"><\/div> <div style=\"background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;\"><\/div> <div style=\"background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);\"><\/div><\/div><div style=\"margin-left: 8px;\"> <div style=\" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;\"><\/div> <div style=\" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)\"><\/div><\/div><div style=\"margin-left: auto;\"> <div style=\" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);\"><\/div> <div style=\" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);\"><\/div> <div style=\" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);\"><\/div><\/div><\/div> <div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;\"> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;\"><\/div> <div style=\" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;\"><\/div><\/div><\/a><\/div><\/blockquote><script async src=\"\/\/platform.instagram.com\/en_US\/embeds.js\"><\/script>\n<\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">The power of imagery in movie poster design<\/h2>\n\n\n\n<p>Imagery attracts attention and is often the most striking aspect of a movie poster, whether it\u2019s a close-up of the lead character from <a href=\"https:\/\/www.imdb.com\/title\/tt1285016\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>The Social Network<\/em><\/a> (2010) or the abstract symbolism of <a href=\"https:\/\/www.imdb.com\/title\/tt1937390\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Nymphomaniac<\/em><\/a> (2013).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"720\" src=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/friends-nympho-1024x720.jpg\" alt=\"Movie poster designs from The Social Network and Nymphomaniac\" class=\"wp-image-90645\" srcset=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/friends-nympho-1024x720.jpg 1024w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/friends-nympho-300x211.jpg 300w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/friends-nympho-768x540.jpg 768w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/friends-nympho-1536x1080.jpg 1536w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/friends-nympho.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Visuals communicate key themes, like the lineup of <a href=\"https:\/\/www.imdb.com\/title\/tt0114814\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>The Usual Suspects<\/em><\/a> or <a href=\"https:\/\/www.imdb.com\/title\/tt0087332\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Ghostbusters<\/em><\/a>\u2019 graphic design. Product and website designers can adapt this approach by including imagery that introduces a product or service, reflects a business\u2019s brand values, and tells stories about it. By thinking of visuals as storytellers rather than fillers, websites can achieve a cinematic quality that draws people in and keeps them engaged.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"720\" src=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/suspects-ghost-busters-1024x720.jpg\" alt=\"Movie poster designs from The Usual Suspects and Ghostbusters\" class=\"wp-image-90648\" srcset=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/suspects-ghost-busters-1024x720.jpg 1024w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/suspects-ghost-busters-300x211.jpg 300w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/suspects-ghost-busters-768x540.jpg 768w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/suspects-ghost-busters-1536x1080.jpg 1536w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/suspects-ghost-busters.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Lean into color<\/h2>\n\n\n\n<p>Movie posters use color to communicate concepts, set the mood, and support the narrative, from Saul Bass\u2019s much-copied <a href=\"https:\/\/www.imdb.com\/title\/tt0052561\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Anatomy of a Murder<\/em><\/a> (1959) to <a href=\"https:\/\/www.imdb.com\/title\/tt0068646\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>The Godfather<\/em><\/a> (1972), which also uses an iconic <a href=\"https:\/\/elements.envato.com\/learn\/best-movie-logos\">movie logo<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"507\" src=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/murder-godfather-bttf-1024x507.jpg\" alt=\"Movie poster designs from Anatomy of a Murder, The Godfather, and Back to the Future\" class=\"wp-image-90646\" srcset=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/murder-godfather-bttf-1024x507.jpg 1024w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/murder-godfather-bttf-300x148.jpg 300w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/murder-godfather-bttf-768x380.jpg 768w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/murder-godfather-bttf-1536x760.jpg 1536w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/murder-godfather-bttf.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The icy blues of <a href=\"https:\/\/www.imdb.com\/title\/tt2294629\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Frozen<\/em><\/a> (2013) suggest adventurous fantasy, while the black, red, and yellow of <a href=\"https:\/\/www.imdb.com\/title\/tt0107290\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Jurassic Park<\/em><\/a> (1993) add to the anticipation. Borrowing from these dramatic palettes can create strong emotional connections for websites. For example, a brand might use a <a href=\"https:\/\/elements.envato.com\/learn\/monochrome-design-trend-2020\">monochromatic palette<\/a> reminiscent of a classic <a href=\"https:\/\/elements.envato.com\/learn\/horror-movie-poster\">horror movie<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"720\" src=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/frozen-park-1024x720.jpg\" alt=\"Movie poster designs from Frozen and Jurassic Park\" class=\"wp-image-90649\" srcset=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/frozen-park-1024x720.jpg 1024w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/frozen-park-300x211.jpg 300w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/frozen-park-768x540.jpg 768w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/frozen-park-1536x1080.jpg 1536w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/frozen-park.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>At the same time, a gaming site could adopt high-contrast, neon tones straight out of science fiction films like <a href=\"https:\/\/www.imdb.com\/title\/tt0084827\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Tron<\/em><\/a> (1982). When you choose colors with intention, they transform a website into a visual experience.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"720\" src=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/exorcist-tron-1024x720.jpg\" alt=\"Movie poster designs from The Exorcist and Tron\" class=\"wp-image-90651\" srcset=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/exorcist-tron-1024x720.jpg 1024w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/exorcist-tron-300x211.jpg 300w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/exorcist-tron-768x540.jpg 768w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/exorcist-tron-1536x1080.jpg 1536w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/exorcist-tron.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Lead the viewer&#8217;s eye<\/h2>\n\n\n\n<p>Movie poster layouts are designed to guide a viewer\u2019s attention toward important content and messaging. They often lead the eye from a focal point to supporting details like taglines or the credits on <em>Back to the Future<\/em> (1985). Titles dominate, taglines intrigue, visuals create impact, and everything is arranged in a hierarchy. Website designers can deconstruct these techniques and design visually striking layouts that prioritize key information.<\/p>\n\n\n\n<p><strong><em>Tip<\/em><\/strong><em>: In a recent video, I suggested ways the homeless charity Crisis could use color, graphics, illustrations, and photographs to make their stories more memorable.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Crisis aims to be bold and impactful. But does their website live up to those goals?\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/v90fVUttlq4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Many great movie posters tell stories without words, using colors, layouts, and visuals to communicate themes. Websites can use storytelling to create similar connections with the people using them. For example, a product page can lead people through a narrative, blending copy with visuals to demonstrate the benefits of using an item.&nbsp;<\/p>\n\n\n\n<section class=\"elements-product-embed elements-product-embed--carousel elements-product-embed--has-info\">\n            <div class=\"elements-product-embed__info\">\n                            <div class=\"elements-product-embed__info-left\">\n                    <h3 class=\"elements-product-embed__title\">\n                        Unlimited creative assets. Access to AI tools.                    <\/h3>\n                <\/div>\n            \n                            <div class=\"elements-product-embed__info-right\">\n                    <a class=\"elements-product-embed__more\" href=\"https:\/\/elements.envato.com\/\" target=\"_blank\">View all<\/a>\n                <\/div>\n                    <\/div>\n    \n    <div class=\"slider\">\n    <div class=\"slider__items\">\n                    <div class=\"slider__item\">\n                <div class=\"elements-product-embed__item\">\n    <a class=\"elements-product-embed__link\" href=\"https:\/\/elements.envato.com\/cinematic-titles-GMLXCYH\" target=\"_blank\"><\/a>\n\n    <div class=\"elements-product-embed__meta\">\n        <h3 class=\"elements-product-embed__meta-item elements-product-embed__meta-item--title\">\n            Cinematic Titles        <\/h3>\n        <span class=\"elements-product-embed__meta-item elements-product-embed__meta-item--author\">\n            NathanStd        <\/span>\n    <\/div>\n\n            <img decoding=\"async\"\n            class=\"elements-product-embed__image\"\n            src=\"https:\/\/elements-resized.envatousercontent.com\/elements-cover-images\/865d8d74-6de4-42f7-8d08-3bfe634d9c6c?w=900&#038;cf_fit=scale-down&#038;q=85&#038;format=auto&#038;s=14f90a8bab79e1662b0c08d8fb39ed314f515a08b789a7c730e2e36a2acfcb92\"\n            alt=\"Cinematic Titles\"\n        >\n    <\/div>\n            <\/div>\n                    <div class=\"slider__item\">\n                <div class=\"elements-product-embed__item\">\n    <a class=\"elements-product-embed__link\" href=\"https:\/\/elements.envato.com\/cinemate-cinematic-XM7Z5AT\" target=\"_blank\"><\/a>\n\n    <div class=\"elements-product-embed__meta\">\n        <h3 class=\"elements-product-embed__meta-item elements-product-embed__meta-item--title\">\n            Cinemate &#8211; Cinematic        <\/h3>\n        <span class=\"elements-product-embed__meta-item elements-product-embed__meta-item--author\">\n            indirastd        <\/span>\n    <\/div>\n\n            <img decoding=\"async\"\n            class=\"elements-product-embed__image\"\n            src=\"https:\/\/elements-resized.envatousercontent.com\/elements-cover-images\/82a02e08-3ba5-43b2-973d-1abb99301e67?w=900&#038;cf_fit=scale-down&#038;q=85&#038;format=auto&#038;s=d7c0aa65d6f8b827f62472b720a6ffaf3814899b21d167976015087a288c1b99\"\n            alt=\"Cinemate - Cinematic\"\n        >\n    <\/div>\n            <\/div>\n                    <div class=\"slider__item\">\n                <div class=\"elements-product-embed__item\">\n    <a class=\"elements-product-embed__link\" href=\"https:\/\/elements.envato.com\/cinematic-billboard-mockup-collection-BH84DQT\" target=\"_blank\"><\/a>\n\n    <div class=\"elements-product-embed__meta\">\n        <h3 class=\"elements-product-embed__meta-item elements-product-embed__meta-item--title\">\n            Cinematic Billboard Mockup Collection        <\/h3>\n        <span class=\"elements-product-embed__meta-item elements-product-embed__meta-item--author\">\n            wecangraphic        <\/span>\n    <\/div>\n\n            <img decoding=\"async\"\n            class=\"elements-product-embed__image\"\n            src=\"https:\/\/elements-resized.envatousercontent.com\/elements-cover-images\/4089baad-c4a5-4801-9ad4-7baa38da14c0?w=900&#038;cf_fit=scale-down&#038;q=85&#038;format=auto&#038;s=4c4491f8804d9b3c57018ef745b9adde1762ec7d6b51967e714514d4be9a1b58\"\n            alt=\"Cinematic Billboard Mockup Collection\"\n        >\n    <\/div>\n            <\/div>\n                    <div class=\"slider__item\">\n                <div class=\"elements-product-embed__item\">\n    <a class=\"elements-product-embed__link\" href=\"https:\/\/elements.envato.com\/cinematic-text-effects-B4JUH9Q\" target=\"_blank\"><\/a>\n\n    <div class=\"elements-product-embed__meta\">\n        <h3 class=\"elements-product-embed__meta-item elements-product-embed__meta-item--title\">\n            Cinematic Text Effects        <\/h3>\n        <span class=\"elements-product-embed__meta-item elements-product-embed__meta-item--author\">\n            pixelbuddha_graphic        <\/span>\n    <\/div>\n\n            <img decoding=\"async\"\n            class=\"elements-product-embed__image\"\n            src=\"https:\/\/elements-resized.envatousercontent.com\/elements-cover-images\/171876cd-5517-482c-b92a-393aaef31c56?w=900&#038;cf_fit=scale-down&#038;q=85&#038;format=auto&#038;s=d0086676546a6bb1ba209ca913059de007a2bb08f2aa7bdce83b6e55daba4518\"\n            alt=\"Cinematic Text Effects\"\n        >\n    <\/div>\n            <\/div>\n                    <div class=\"slider__item\">\n                <div class=\"elements-product-embed__item\">\n    <a class=\"elements-product-embed__link\" href=\"https:\/\/elements.envato.com\/movie-posters-collection-JPG636E\" target=\"_blank\"><\/a>\n\n    <div class=\"elements-product-embed__meta\">\n        <h3 class=\"elements-product-embed__meta-item elements-product-embed__meta-item--title\">\n            Movie Posters Collection        <\/h3>\n        <span class=\"elements-product-embed__meta-item elements-product-embed__meta-item--author\">\n            pixelbuddha_graphic        <\/span>\n    <\/div>\n\n            <img decoding=\"async\"\n            class=\"elements-product-embed__image\"\n            src=\"https:\/\/elements-resized.envatousercontent.com\/elements-cover-images\/41ac7a6d-725c-4029-add5-f05df73449b5?w=900&#038;cf_fit=scale-down&#038;q=85&#038;format=auto&#038;s=c6c7a5141e166bc6d7bd5eece9c4a31e5c6cbae4b3016bfb3ee7a90876b9e389\"\n            alt=\"Movie Posters Collection\"\n        >\n    <\/div>\n            <\/div>\n            <\/div>\n\n    <div class=\"slider__controls\">\n        <a class=\"slider__control slider__control--prev\" href=\"#\">\n            &lt;\n        <\/a>\n        <a class=\"slider__control slider__control--next\" href=\"#\">\n            &gt;\n        <\/a>\n    <\/div>\n<\/div><\/section>\n\n\n\n<p>Cinematic transitions, interactive elements, and scrolling effects can make websites feel immersive. By learning from poster designers\u2019 ability to condense narratives and stimulate reactions, web designers can craft engaging and informative experiences that keep people captivated from the title to the end credits.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Movie poster design meets website design<\/h2>\n\n\n\n<p>Let\u2019s now walk through a theoretical web design brief, and see if we can use cinema to inspire our choices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The brief<\/h3>\n\n\n\n<p>My client, The Daily Grind, is a coffee company that provides products and services to caf\u00e9s and coffee shops. The team wants a bold, disruptive design distinct from the brand&#8217;s competitors. (Oh, and The Daily Grind isn\u2019t an actual client, but the creative challenges and decisions involved in designing layouts during a project like this are real.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What the client likes<\/h3>\n\n\n\n<p>The Daily Grind team is obsessed with movies, and many conversations inevitably turned to talking about our favorite films. The best movie posters are superb specimens of hierarchical design because they organize elements so audiences can easily spot a film\u2019s title, tagline, and who\u2019s starring. Although the team initially didn\u2019t realize it, our shared love of movies will influence the new design.<\/p>\n\n\n\n<p>Just as movie posters make someone stop and pay attention, the team wants certain pages on The Daily Grind to do the same by letting people know they\u2019ve reached important milestones. They&#8217;ve&nbsp;identified pages where a branded experience would benefit their business, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Checkout<\/li>\n\n\n\n<li>Donations<\/li>\n\n\n\n<li>Error pages<\/li>\n\n\n\n<li>Landing pages<\/li>\n\n\n\n<li>Login pages<\/li>\n\n\n\n<li>Product pages<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">What the client doesn\u2019t like<\/h3>\n\n\n\n<p>The Daily Grind doesn\u2019t want poster pastiches for its pages. They&#8217;re not looking for the close-up face and carefully constructed typographic style of <em>The Social Network<\/em>. They don\u2019t want to copy the content of a poster like <em>Platoon<\/em> or the colors, textures, and type from <em>Pulp Fiction<\/em>. They especially don\u2019t want to see a replica of a poster like <em><a href=\"https:\/\/elements.envato.com\/learn\/ghostbusters-logo\">Ghostbusters<\/a><\/em>, no matter how much they all loved the movie.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"720\" src=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/404-1024x720.jpg\" alt=\"Pastiches of popular posters pose a particular problem.\" class=\"wp-image-90652\" srcset=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/404-1024x720.jpg 1024w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/404-300x211.jpg 300w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/404-768x540.jpg 768w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/404-1536x1080.jpg 1536w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/404.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>So, it\u2019s critical to remember that being fascinated by movie posters or any other design medium doesn\u2019t mean making facsimiles of them. Instead, we should explore connections, deconstruct techniques, and understand design principles, including balance, contrast, hierarchy, proportions, and scale.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"720\" src=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/not-found-1024x720.jpg\" alt=\"404 page based on a movie poster design\" class=\"wp-image-90653\" srcset=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/not-found-1024x720.jpg 1024w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/not-found-300x211.jpg 300w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/not-found-768x540.jpg 768w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/not-found-1536x1080.jpg 1536w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/not-found.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">What else they do<\/h3>\n\n\n\n<p>Alongside its commercial activities, The Daily Grind raises money to support sustainable coffee growers. The pages explaining what each grower does and inviting donations must be compelling. Faces are often prominent in movie poster design, so I include large portraits that look straight into a viewer\u2019s eyes and demand a reaction.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"613\" src=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-1024x613.jpg\" alt=\"website design for The Daily Grind\" class=\"wp-image-90654\" srcset=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-1024x613.jpg 1024w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-300x180.jpg 300w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-768x460.jpg 768w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-1536x920.jpg 1536w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Posters often use gigantic titles, so I add oversized and center-aligned headlines, which dominate the page and exaggerate the visual hierarchy when combined with a portrait of the grower. Using an accent color lets people know which interactive elements are ready to be used.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"613\" src=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-2-1024x613.jpg\" alt=\"Exaggerated visual hierarchy and accent color for interactions.\" class=\"wp-image-90655\" srcset=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-2-1024x613.jpg 1024w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-2-300x180.jpg 300w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-2-768x460.jpg 768w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-2-1536x920.jpg 1536w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-2.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Visual hierarchy is as crucial for products and websites as for poster design. It ensures that key information attracts attention and is easily understood. A well-structured hierarchy guides the viewer\u2019s eye through the content by prioritizing elements like headlines, images, and calls to action.&nbsp;<\/p>\n\n\n\n<p>Without a hierarchy, designs might appear cluttered or confusing, reducing their impact. An obvious hierarchy delivers the message clearly and quickly. In this example, the large image and dominant title at the top of the hierarchy convey the page\u2019s purpose, while supporting information becomes progressively smaller.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"613\" src=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-3-1024x613.jpg\" alt=\"Strong visual hierarchy in website design\" class=\"wp-image-90656\" srcset=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-3-1024x613.jpg 1024w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-3-300x180.jpg 300w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-3-768x460.jpg 768w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-3-1536x920.jpg 1536w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-3.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Posters often use gigantic titles and high contrast between colors, so I oversize and center-align the headlines to exaggerate the visual hierarchy.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"988\" height=\"1024\" src=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-4-988x1024.jpg\" alt=\"Donation process on website\" class=\"wp-image-90657\" srcset=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-4-988x1024.jpg 988w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-4-289x300.jpg 289w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-4-768x796.jpg 768w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-4-1482x1536.jpg 1482w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2025\/01\/lola-4.jpg 1920w\" sizes=\"(max-width: 988px) 100vw, 988px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Leave your audience wanting more<\/h2>\n\n\n\n<p>Movie posters prove that design can be artistic and functional, conveying complex ideas with flair and simplicity. By adopting a few key principles from movie <a href=\"http:\/\/Movie posters prove that design can be artistic and functional, conveying complex ideas with flair and simplicity. By adopting a few key principles from movie poster design, designers can create products and website designs that captivate people and inspire them to connect with a business or a brand. Those principles are:\">poster design<\/a>, designers can create products and website designs that captivate people and inspire them to connect with a business or a brand. Those principles are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bold typography<\/li>\n\n\n\n<li>Impactful imagery<\/li>\n\n\n\n<li>Thoughtful hierarchy<\/li>\n\n\n\n<li>Emotional storytelling<\/li>\n<\/ul>\n\n\n\n<p>Some might see this approach as pushing boundaries. Still, I\u2018ve spent my career encouraging designers to think beyond conventional approaches to web design so they can create experiences that, like great movies, leave audiences wanting more.<\/p>\n\n\n\n<p>If you\u2019re looking for more inspiration in your web design journey, check out our <a href=\"https:\/\/elements.envato.com\/learn\/web-design-trends\">web design trends for 2025<\/a> and <a href=\"https:\/\/elements.envato.com\/learn\/fanzine-web-design-inspiration\/\">my recent post on fanzines<\/a> and how their graphic design sticks two fingers up at convention!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">About the Author<\/h3>\n\n\n\n<p>Often referred to as one of the pioneers of web design, <a href=\"https:\/\/stuffandnonsense.co.uk\" target=\"_blank\" rel=\"noreferrer noopener\">Andy Clarke<\/a> has been instrumental in pushing the boundaries of web design and is known for his creative and visually stunning designs. His work has inspired countless designers to explore the full potential of product and website design.<\/p>\n\n\n\n<p>Andy\u2019s written several industry-leading books, including \u201cTranscending CSS,\u201d \u201cHardboiled Web Design,\u201d and \u201dArt Direction for the Web.\u201d He\u2019s also worked with businesses of all sizes and industries to achieve their goals through design.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Web design inspiration: Lessons from Design Greats\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/wqVJXhkdYN4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Visit Andy\u2019s studio, <a href=\"https:\/\/stuffandnonsense.co.uk\" target=\"_blank\" rel=\"noreferrer noopener\">Stuff &amp; Nonsense<\/a>, and check out his <a href=\"https:\/\/stuffandnonsense.store\" target=\"_blank\" rel=\"noreferrer noopener\">limited edition Premium Squarespace templates<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Andy Clarke explores what web designers can learn from movie poster design.<\/p>\n","protected":false},"author":272,"featured_media":90848,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[168],"tags":[],"class_list":["post-74310","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-trends"],"acf":[],"_links":{"self":[{"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/posts\/74310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/users\/272"}],"replies":[{"embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/comments?post=74310"}],"version-history":[{"count":1,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/posts\/74310\/revisions"}],"predecessor-version":[{"id":97527,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/posts\/74310\/revisions\/97527"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/media\/90848"}],"wp:attachment":[{"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/media?parent=74310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/categories?post=74310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/tags?post=74310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}