Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Take your Communities to the next level - Fabio...

Take your Communities to the next level - Fabio Gervasoni, HCL

Let'sConnect Connects Virtual March 2021

Connections 7 offers new ways of tweaking and customizing the homepage layout of your community and new capabilities made possible by new Connections templates. In this session, Fabio Gervasoni, head of the HCL Connections Design team, will share design tips and best practices on developing Communities that are suited to your needs, attractive and engaging for your specific audiences.

LetsConnect

March 22, 2021
Tweet

More Decks by LetsConnect

Other Decks in Technology

Transcript

  1. Take your Communities to the next level Fabio Gervasoni Lead

    UX/UI Designer | HCL Digital Solutions Copyright © 2021 HCL Technologies Limited | www.hcltech.com March 16, 2021
  2. Content • Web design - basic principles • Demo/widgets examples

    • Resources • Questions Copyright © 2021 HCL Technologies Limited | www.hcltech.com
  3. Basic principles of web design Copyright © 2021 HCL Technologies

    Limited | www.hcltech.com 1 2 Consistency Simplicity
  4. 1. Consistency Copyright © 2021 HCL Technologies Limited | www.hcltech.com

    Typography Colour Aa Layout • Avoid a cluttered layout • Avoid using too many colours • Chose colour pairing carefully serif sans serif • Avoid using too many fonts/font sizes • Ensure readability • Watch for symmetry /alignments
  5. 2. Simplicity Copyright © 2021 HCL Technologies Limited | www.hcltech.com

    Easy to scan page 1 2 3 Visual hierarchy • Highlight important elements (size/colour) • Choose suitable layout grid for content • Use images with purpose • Avoid ’wall of text’ paragraphs • Use headers, bullet points • Watch line length (45 to 75 characters) Contrast You will read this first And you will read this Then this one And you will read this last
  6. Free resources Copyright © 2021 HCL Technologies Limited | www.hcltech.com

    Stock images https://pixlr.com/ https://www.pexels.com/ Image editor Colour palettes https://color.adobe.com/create/color-wheel