mirror of
https://github.com/samuelclay/NewsBlur.git
synced 2025-08-05 16:58:59 +00:00
137 lines
9.1 KiB
HTML
137 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en"><head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link rel="shortcut icon" href="https://newsblur.com/media/img/favicon.ico" type="image/png" />
|
||
<link rel="icon" href="https://newsblur.com/media/img/favicon_32.png" sizes="32x32"/>
|
||
<link rel="icon" href="https://newsblur.com/media/img/favicon_64.png" sizes="64x64"/>
|
||
<link rel="alternate" type="application/rss+xml"
|
||
title="The NewsBlur Blog RSS feed"
|
||
href="/feed.xml" /><!-- Begin Jekyll SEO tag v2.8.0 -->
|
||
<title>2022 redesign: new dashboard layout, refreshed stories and story titles, and entirely redrawn icons | The NewsBlur Blog</title>
|
||
<meta name="generator" content="Jekyll v4.2.2" />
|
||
<meta property="og:title" content="2022 redesign: new dashboard layout, refreshed stories and story titles, and entirely redrawn icons" />
|
||
<meta property="og:locale" content="en_US" />
|
||
<meta name="description" content="The launch of the new Premium Archive subscription tier also includes the 2022 redesign. You’ll see a third dashboard layout which stretches out your dashboard rivers across the width of the screen." />
|
||
<meta property="og:description" content="The launch of the new Premium Archive subscription tier also includes the 2022 redesign. You’ll see a third dashboard layout which stretches out your dashboard rivers across the width of the screen." />
|
||
<link rel="canonical" href="https://blog.newsblur.com/2022/07/01/dashboard-redesign-2022/" />
|
||
<meta property="og:url" content="https://blog.newsblur.com/2022/07/01/dashboard-redesign-2022/" />
|
||
<meta property="og:site_name" content="The NewsBlur Blog" />
|
||
<meta property="og:type" content="article" />
|
||
<meta property="article:published_time" content="2022-07-01T00:00:00-04:00" />
|
||
<meta name="twitter:card" content="summary" />
|
||
<meta property="twitter:title" content="2022 redesign: new dashboard layout, refreshed stories and story titles, and entirely redrawn icons" />
|
||
<script type="application/ld+json">
|
||
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2022-07-01T00:00:00-04:00","datePublished":"2022-07-01T00:00:00-04:00","description":"The launch of the new Premium Archive subscription tier also includes the 2022 redesign. You’ll see a third dashboard layout which stretches out your dashboard rivers across the width of the screen.","headline":"2022 redesign: new dashboard layout, refreshed stories and story titles, and entirely redrawn icons","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.newsblur.com/2022/07/01/dashboard-redesign-2022/"},"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://blog.newsblur.com/assets/newsblur_logo_512.png"}},"url":"https://blog.newsblur.com/2022/07/01/dashboard-redesign-2022/"}</script>
|
||
<!-- End Jekyll SEO tag -->
|
||
<link rel="stylesheet" href="/assets/main.css">
|
||
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6565292/711824/css/fonts.css" />
|
||
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6565292/731824/css/fonts.css" /><link type="application/atom+xml" rel="alternate" href="https://blog.newsblur.com/feed.xml" title="The NewsBlur Blog" /></head>
|
||
<body><header class="site-header" role="banner">
|
||
|
||
<div class="wrapper"><a class="site-title" rel="author" href="/">
|
||
<div class="site-title-image">
|
||
<img src="/assets/newsblur_logo_512.png">
|
||
</div>
|
||
<div class="site-title-text">The NewsBlur Blog</div>
|
||
</a><nav class="site-nav">
|
||
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
|
||
<label for="nav-trigger">
|
||
<span class="menu-icon">
|
||
<svg viewBox="0 0 18 15" width="18px" height="15px">
|
||
<path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
|
||
</svg>
|
||
</span>
|
||
</label>
|
||
|
||
<div class="trigger"><a class="page-link" href="https://www.newsblur.com">Visit NewsBlur ➤</a></div>
|
||
</nav></div>
|
||
</header>
|
||
|
||
<header class="site-subheader" role="banner">
|
||
|
||
<div class="wrapper">
|
||
<div class="top">
|
||
NewsBlur is a personal news reader that brings people together to talk about the world.
|
||
</div>
|
||
<div class="bottom">
|
||
A new sound of an old instrument.
|
||
</div>
|
||
</div>
|
||
|
||
</header>
|
||
<main class="page-content" aria-label="Content">
|
||
<div class="wrapper">
|
||
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
|
||
|
||
<header class="post-header">
|
||
<h1 class="post-title p-name" itemprop="name headline">2022 redesign: new dashboard layout, refreshed stories and story titles, and entirely redrawn icons</h1>
|
||
<p class="post-meta">
|
||
<time class="dt-published" datetime="2022-07-01T00:00:00-04:00" itemprop="datePublished">Jul 1, 2022
|
||
</time></p>
|
||
</header>
|
||
|
||
<div class="post-content e-content" itemprop="articleBody">
|
||
<p>The launch of the new <a href="/2022/07/01/premium-archive-subscription/">Premium Archive subscription tier</a> also includes the 2022 redesign. You’ll see a third dashboard layout which stretches out your dashboard rivers across the width of the screen.</p>
|
||
|
||
<p><img src="/assets/premium-archive-dashboard-comfortable.png" style="width: calc(140%);margin: 12px 0 12px calc(-20%);max-width: none;border: none" /></p>
|
||
|
||
<p>The latest redesign style has more accomodations for spacing and padding around each story title element. The result is a cleaner story title with easier to read headlines. The author has been moved and restyled to be next to the story date. Favicons and unread status indicators have been swapped, and font sizes, colors, and weights have been adjusted.</p>
|
||
|
||
<p><img src="/assets/premium-archive-dashboard-compact.png" style="width: calc(140%);margin: 12px 0 12px calc(-20%);max-width: none;border: none" /></p>
|
||
|
||
<p>If you find the interface to be too airy, there is a setting in the main Manage menu allowing you to switch between Comfortable and Compact. The compact interface is denser than before, giving power users a highly detailed view.</p>
|
||
|
||
<p>Transitions have also been added to help you feel the difference. And there are new animations during many of the transitions that accompany changing settings.</p>
|
||
|
||
<p>
|
||
<video autoplay="" loop="" playsinline="" muted="" width="500" style="width: 500px;border: 2px solid rgba(0,0,0,0.1)">
|
||
<source src="/assets/premium-archive-grid.mp4" type="video/mp4" />
|
||
</video>
|
||
</p>
|
||
|
||
<p>And lastly, this redesign comes with a suite of all new icons. The goal with this icon redesign is to bring a consistent weight to each icon as well as vectorize them with SVG so they look good at all resolutions.</p>
|
||
|
||
<p><img src="/assets/premium-archive-manage-menu.png" style="width: 275px;border: 1px solid #A0A0A0;margin: 24px auto;display: block;" /></p>
|
||
|
||
<p>A notable icon change is the unread indicator, which now has different size icons for both unread stories and focus stories, giving focus stories more depth.</p>
|
||
|
||
<p><img src="/assets/premium-archive-unread-dark.png" style="width: 375px;border: 1px solid #A0A0A0;margin: 24px auto;display: block;" /></p>
|
||
|
||
<p>Here’s a screenshot that’s only possible with the new premium archive, complete with backfilled blog post from the year 2000, ready to be marked as unread.</p>
|
||
|
||
<p><img src="/assets/premium-archive-unread.png" style="width: 100%;border: 1px solid #A0A0A0;margin: 24px auto;display: block;" /></p>
|
||
|
||
<p>I tried to find every icon, so if you spot a dialog or menu that you’d like to see given some more love, reach out on the support forum.</p>
|
||
|
||
</div><a class="u-url" href="/2022/07/01/dashboard-redesign-2022/" hidden></a>
|
||
</article>
|
||
|
||
</div>
|
||
</main><footer class="site-footer h-card">
|
||
<data class="u-url" href="/"></data>
|
||
|
||
<div class="wrapper">
|
||
|
||
<h2 class="footer-heading">The NewsBlur Blog</h2>
|
||
|
||
<div class="footer-col-wrapper">
|
||
|
||
|
||
<div class="footer-col footer-col-1"><ul class="social-media-list"><li><a href="https://github.com/samuelclay"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">samuelclay</span></a></li><li><a href="https://www.twitter.com/newsblur"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">newsblur</span></a></li><li><a href="mailto:blog@newsblur.com?subject=Hello from the NewsBlur blog"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#email"></use></svg> <span class="username">blog@newsblur.com</span></a></li></ul>
|
||
</div>
|
||
|
||
<div class="footer-col footer-col-3">
|
||
<p>NewsBlur is a personal news reader that brings people together to talk about the world.<br />
|
||
A new sound of an old instrument.<br />
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</footer>
|
||
</body>
|
||
|
||
</html>
|