Blog/News Section Design Development
Blog and news sections are typical components easily ruined. Common mistakes: overloaded publication cards, unreadable typography in article body, missing hierarchy between title, excerpt, and date. Design goal—enable quick list scanning and comfortable reading of individual articles.
Section Structure
Listing (publication list): cards with following elements—cover (thumbnail), category/tag, title, brief description (150–200 characters), author, date, reading time. Reading time is calculated from word count (average speed: 200 words per minute).
Article page: header with or without cover, H1 title, metadata, article body, "read also" block, comments form or CTA.
Article Body Typography
Main text: font-size: 17–18px, line-height: 1.65–1.75, line width 65–75 characters (max-width: 700–740px). For Cyrillic fonts, keep letter spacing (letter-spacing) at 0 or minimal—unlike Latin.
Internal headings (H2, H3) should visually differ from page heading: smaller size, different weight (font-weight: 600 vs 700), top margin twice larger than bottom.
Listing Grid
Three common options:
- Newspaper grid — one featured article large, rest in two-three columns
- Card grid — equal cards in 2–3 columns (Pinterest-like without masonry for news)
- List with cover — horizontal cards, suitable for news format with dense content stream
Timeline
Design of listing + article page for Figma (desktop + mobile): 2–3 working days. Including prototyping states (hover, active tags, pagination): 3–4 days.