{"id":225,"date":"2024-03-29T23:00:45","date_gmt":"2024-03-29T23:00:45","guid":{"rendered":"https:\/\/croakthecode.tcu.edu\/nguyen\/?p=225"},"modified":"2024-05-06T14:45:36","modified_gmt":"2024-05-06T14:45:36","slug":"newspaper-website-design-explained","status":"publish","type":"post","link":"https:\/\/croakthecode.tcu.edu\/nguyen\/2024\/03\/29\/newspaper-website-design-explained\/","title":{"rendered":"newspaper website design, explained."},"content":{"rendered":"\n

I’m a graphic designer, but I love journalism, especially its adaptation to the internet landscape past few decades. I know newspaper target audience is mostly “serious” business and adults. But anyone needs a good source of information. Kids don’t read these day, so:<\/p>\n\n\n\n

\n

How can you provide information while still make it interesting to consume for a 9 seconds attention span?<\/p>\n<\/blockquote>\n\n\n\n

\n
\n
\"\"
What we think of Journalism<\/figcaption><\/figure>\n\n\n\n
\"\"
What we are dealing with<\/figcaption><\/figure>\n<\/figure>\n<\/div>\n\n\n\n

newspaper website design<\/h2>\n\n\n\n

anh’s note from reading Newspaper Website Design: Trends And Examples<\/strong><\/a><\/em> by Steven Snell<\/strong><\/p>\n\n\n\n

\n
\"\"
The New Yorker<\/figcaption><\/figure>\n\n\n\n
\"\"
The Wall Street Journal<\/figcaption><\/figure>\n<\/figure>\n\n\n\n
\"\"
Vox Media<\/figcaption><\/figure>\n\n\n\n
\n
\"\"
The New York Times<\/figcaption><\/figure>\n\n\n\n
\"\"
Bloomberg<\/figcaption><\/figure>\n<\/figure>\n\n\n\n

A newspaper website, according to Wikipedia, serves as the digital counterpart<\/strong> to traditional newspapers, providing news content, articles, and features in a digital format accessible via the internet. Yet, keep in mind that digital is more of the main view now.<\/p>\n\n\n\n

Content Display Challenges:<\/strong><\/p>\n\n\n\n

    \n
  • News websites must effectively manage and display a large volume of content<\/strong> on the homepage, leading to layout, usability, and navigational hurdles for designers.<\/li>\n\n\n\n
  • These challenges are applicable to various types of websites, including those with blog themes.<\/li>\n<\/ul>\n\n\n\n

    Monetization Considerations:<\/strong><\/p>\n\n\n\n

      \n
    • Integrating advertisements into the design is crucial for monetization<\/strong>.<\/li>\n\n\n\n
    • Some websites struggle with intrusive or excessive ads<\/strong>, while others balance ads effectively alongside content.<\/li>\n<\/ul>\n\n\n\n

      Variety in Newspaper Websites:<\/strong><\/p>\n\n\n\n

        \n
      • The term “newspaper website” encompasses online periodicals, major newspapers’ online versions, standard news websites, and hybrids of news and blogs.<\/li>\n<\/ul>\n\n\n\n

        the design<\/h2>\n\n\n\n

        Color Schemes:<\/strong><\/p>\n\n\n\n

        \"LA<\/figure>\n\n\n\n
          \n
        • Dark text on white: <\/strong>Ensures readability with the high volume of content.<\/li>\n\n\n\n
        • Blue and red accents:<\/strong> Commonly used for headlines, links, and accents.<\/li>\n\n\n\n
        • Additional colors:<\/strong> Introduced in navigation elements for visual interest.<\/li>\n<\/ul>\n\n\n\n

          Header and Sidebar Banners:<\/strong><\/p>\n\n\n\n

          \"Telegraph\"<\/figure>\n\n\n\n
            \n
          • Crucial revenue source:<\/strong> Banner ads, particularly in headers, are essential for monetization.<\/li>\n\n\n\n
          • Varied ad placements: <\/strong>Some exclude banners on the home page, while others feature them prominently.<\/li>\n\n\n\n
          • Banner dimensions:<\/strong> Sidebar banners often larger, such as 300 by 250 pixels.<\/li>\n<\/ul>\n\n\n\n

            Top Navigation:<\/strong><\/p>\n\n\n\n

            \"Times<\/figure>\n\n\n\n
              \n
            • Primary navigation placement:<\/strong> Typically located below the header and above the content.<\/li>\n\n\n\n
            • Navigation styles:<\/strong> Vary from traditional dropdown menus to tabbed interfaces.<\/li>\n\n\n\n
            • Exceptions:<\/strong> Some sites, like The New York Times, utilize left sidebars for navigation.<\/li>\n<\/ul>\n\n\n\n

              Tabbed Content Areas:<\/strong><\/p>\n\n\n\n

              \"Wired\"<\/figure>\n\n\n\n
                \n
              • Enhanced user control:<\/strong> Allows access to popular, recent, or commented articles.<\/li>\n\n\n\n
              • Space-saving design:<\/strong> Efficiently organizes content in sidebars or main areas.<\/li>\n\n\n\n
              • Examples:<\/strong> Wired and The Guardian utilize tabbed interfaces effectively.<\/li>\n<\/ul>\n\n\n\n

                Grid-Based Layouts:<\/strong><\/p>\n\n\n\n

                \"NY<\/figure>\n\n\n\n
                  \n
                • Efficient organization:<\/strong> Grid layouts effectively manage large content volumes.<\/li>\n\n\n\n
                • Visually appealing:<\/strong> Provides a structured and aesthetically pleasing design.<\/li>\n\n\n\n
                • Examples:<\/strong> The New York Times and The Guardian employ grid-based layouts.<\/li>\n<\/ul>\n\n\n\n

                  Social Media Integration:<\/strong><\/p>\n\n\n\n

                  \"\"<\/figure>\n\n\n\n
                    \n
                  • Subtle integration:<\/strong> Social media widgets are discreetly incorporated into the design.<\/li>\n\n\n\n
                  • Prominent sharing buttons:<\/strong> Ensure social sharing without dominating the layout.<\/li>\n\n\n\n
                  • Exceptions:<\/strong> The Huffington Post features dedicated sections for social media content.<\/li>\n<\/ul>\n\n\n\n

                    Really Simple Syndication (RSS) Feeds:<\/strong><\/p>\n\n\n\n

                    \"Guardian\"<\/figure>\n\n\n\n
                      \n
                    • Less prominent:<\/strong> RSS icons or links are available but not emphasized in the design.<\/li>\n\n\n\n
                    • Availability:<\/strong> Most news websites offer feeds but do not prioritize them in the layout.<\/li>\n\n\n\n
                    • Example:<\/strong> The Guardian includes a feed link in its header.<\/li>\n<\/ul>\n\n\n\n

                      Comments:<\/strong><\/p>\n\n\n\n

                        \n
                      • Reduced emphasis:<\/strong> Comments sections are less visible in the design hierarchy.<\/li>\n\n\n\n
                      • Importance:<\/strong> Reader comments are essential but not prominently featured.<\/li>\n\n\n\n
                      • Exception:<\/strong> ABC News prominently displays comment counts on home page excerpts.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

                        I’m a graphic designer, but I love journalism, especially its adaptation to the internet landscape past few decades. I know newspaper target audience is mostly “serious” business and adults. But anyone needs a good source of information. Kids don’t read these day, so: How can you provide information while still make it interesting to consume […]<\/p>\n","protected":false},"author":13,"featured_media":270,"comment_status":"open","ping_status":"open","sticky":false,"template":"single-with-sidebar","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[5],"tags":[],"class_list":["post-225","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inspiration"],"_links":{"self":[{"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/posts\/225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/comments?post=225"}],"version-history":[{"count":0,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/posts\/225\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/media\/270"}],"wp:attachment":[{"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/media?parent=225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/categories?post=225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/tags?post=225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}