NOTION WEB DESIGN FULL

In The NBA - in Notion, the logos are used as icons to transform the team lists: That's particularly true in databases: When all items include an icon, databases are particularly attractive. Icons make a nice enhancement to the top of a page, but they're particularly pleasing in references to that page, such as Link to Page blocks, databases and your sidebar. While the default page margins offer appealing negative space, full-width pages are more suitable for wider content, such as databases with a high volume of content. However, be sure to avoid columns when they cause abbreviations via ellipses. You can even place a section's heading in an adjacent column rather than above the content, as you see in Pocket Casts × Nutt Labs: The NBA - in Notion offers a nice example of columned databases. For narrow content types, such as Table of Contents blocks, small photos, and simple lists (bullets, numbers, to-dos and databases), consider creating columns. Like diversifying blocks, columns can vary the structure of your page to increase aesthetic appeal and viewer engagement. Bittermilk × Loggerhead Labs uses a blank column to artificially 'align' a subtle note above a table: Use columns when you can enable full-width when you must.

Negative space is a core tenet of good design use it liberally and creatively without hesitation. Using Headings, Dividers, full-width Images and ample spacing, create strong separations between the sections of your page. Segmenting your content into sections makes it more visually satisfying and easier to comprehend.

NOTION WEB DESIGN FULL

Utilize Notion's full spectrum of blocks, including Callouts, Quotes and Toggles, to the extent your content allows.įor high-priority links, consider using Callouts arranged in columns: Space and divide your content. Diversify blocks.īlock variation enriches the aesthetic of your page and keeps visitors engaged. Under 'My Areas' in the employee homepage, the Linked Database includes 'Clients' and 'Internal' views. Rather than creating two Linked Databases for the same database, create multiple views of the same Linked Database. Likewise, the employee homepage hides the 'Assigned Tasks,' which are referenced less frequently than the other essential content.Īlso be sure to avoid redundancy.

The Loggerhead Labs Home Base rolls resources into Toggle blocks: This retains minimalism without eliminating essential content. You can also use toggles to hide content until the viewer actively expands it. Part of Notion's unique power is in its linked hierarchical pages, so when you can, break your content into multiple pages with an intuitive wiki-like navigation structure. Stay focused on your defined objective, and include only information that supports it. Minimize the volume of content to maximize its impact and create aesthetic minimalism. That Callout is grayed in order to reduce its visual prominence: Minimize content. The NBA - in Notion uses a Callout to instruct visitors to choose database views. In Pocket Casts × Nutt Labs, a Quote block brings emphasis to the opening statement:įor text of lesser importance, consider coloring it gray or rolling it into a Toggle block. You can also draw attention to text with Callout and Quote blocks. Headings 1, 2 and 3 is the most common approach to this hierarchy. Visual hierarchy significantly enhances the page aesthetic and the retention of its content. Create visual hierarchy.īy varying size, color, position and block types, you can create a hierarchy of importance and a natural path for the viewer's eye. Some pages may need to convey a project's progress simply and quickly others might deliver a particular message and sentiment. What's the purpose of the page? Articulating the objective will inform the content you include (and exclude), and the way that content is presented. Learn more about these pages in Build a Bulletproof Notion Workspace, Personal Pages in Team Workspaces and The NBA - in Notion. Use columns when you can enable full-width when you must.Īs you implement design principles in your pages, reference other pages that use them effectively.

Notion web design