Events
UX principles for developers

UX principles for developers

Abstract

Il talk offre una panoramica su alcuni principi fondamentali dell’User Experience (UX), e sul valore di metterli a fattor comune tra designer e developers. Attraverso esempi pratici e consigli applicabili, verranno mostrati i principi che sono dietro a molte scelte progettuali che abilitano un approccio collaborativo tra design e sviluppo in modo da accrescere la sinergia di un team e migliorare il valore di un prodotto.

Language

Italiano

About Guido

UX designer e facilitatore si occupa di consulenza strategica aiutando aziende ed organizzazioni ad evolvere i loro processi, prodotti e servizi.

2. Structure

Understand the structure of the theme’s setup to create content for your website.

Theme’s content structure

.
├── ...
├── content                 # Hosts all Markdown content
│   ├── articles            # Contains the list of markdown files for notes/posts
│   │   ├── article-1.md
│   │   ├── article-2.md
│   │   └── article-3.md
│   └── portfolio           # List of portfolio projects or case studies
│       ├── project-1.md
│       └── project-2.md
├── data                    # Test files (alternatively `spec` or `tests`)
│   └── stack.json          # Data used for rendering the list in Stack page
└── ...

Note that articles, portfolio and also stack pages require you to create _index.md inside of it. Refer the exampleSite in theme.

3. Primary Menu

The sidebar of the theme uses the main menu. Add all the items for your sidebar navigation in this menu.

// config.toml

[menu]
[[menu.main]]
  name = 'Home'
  url = '/'
  weight = 1
[[menu.main]]
  name = 'Content'
  params.header = true
  weight = 2
[[menu.main]]
  name = 'Events'
  url = '/events'
  weight = 3
  • name → Title of the menu item
  • url → Path to navigate
  • weight → Used to decide the order of menu items
  • params.header → Display menu item as header

If the link points to an external website, the external icon is already displayed.

4. Social Menu

The social menu can be used to configure all the social icons in the sidebar. Add links to your social media in the website config to show the icons.

[[menu.social]]
  name = 'Twitter'
  url = 'https://twitter.com'
  weight = 1

The name of the social menu needs to be unique and should be one of the supported values.

Supported values for the social menu item name:

  • Twitter
  • GitHub
  • LinkedIn
  • Instagram
  • Mastodon
  • Dribbble
  • Codepen
  • Twitch
  • Email
  • RSS

→ Configure newsletter

5. Newsletter

The theme supports a subscription to multiple newsletter providers.

  • Buttondown
  • Substack
  • Revue

Buttondown

[Params.newsletter.provider] = “buttondown”

Copy the action url from your buttondown admin dashboard and add it to [Params.newsletter.path] in config.toml

Buttondown share form URL

Substack

[Params.newsletter.provider] = “substack”

Setting up substack is the easiest. Just add your substack newsletter URL (applicable for custom domains also) to [Params.newsletter.path] in config.toml

Note that since substack doesn’t have a native API for subscription. The theme uses the api from substackapi.com which is in no way associated to Substack itself.

6. Google Analytics

Digital garden theme utilizes the Hugo’s [internal template](internal templates) for Google analytics and so both Google analytics v3 and GA v4 (gtag) are supported.

Add your UA-PROPERTY_ID or G-MEASUREMENT_ID to config.toml

Google Analytics v3 (analytics.js)

googleAnalytics = 'UA-PROPERTY_ID'

Google Analytics v4 (gtag.js)

googleAnalytics = 'G-MEASUREMENT_ID'

→ Configure Metatags

7. Metatags

Metatags are used to provide additional information about the page, usually used by search engines and social media websites / apps. It allows to customize your page’s title, description, preview image and more.

Configure default tags

// config.toml

title = "Personal Digital Garden"

[Params]
  description = "My Digital Garden on the Internet"
  images = ['/digital-garden-logo.png']

Setting the above values will be used as default for all pages unless its overridden in a specific page’s markdown.

7. Metatags

Planted December 18, 2021

Metatags are used to provide additional information about the page, usually used by search engines and social media websites / apps. It allows to customize your page’s title, description, preview image and more.

Configure default tags

// config.toml

title = "Personal Digital Garden"

[Params]
  description = "My Digital Garden on the Internet"
  images = ['/digital-garden-logo.png']

Setting the above values will be used as default for all pages unless its overridden in a specific page’s markdown.

Customize specific page’s tags

Open the markdown file of the page for which you need to customize the tags and set the following properties

// custom-page.md

title = 'Custom Page'
description = "My Custom page in the Digital Garden"
images = ['/custom-page.png']

These values will be used for open graph tags and twitter cards.

If you like this theme, support by sharing it with friends on Twitter － Twitter URL