Events on Ticino Software Craft

UX principles for developers

Thu, 12 Dec 2024 00:00:00 +0000

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

Sat, 18 Dec 2021 00:00:00 +0000

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

Sat, 18 Dec 2021 00:00:00 +0000

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

Sat, 18 Dec 2021 00:00:00 +0000

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

Sat, 18 Dec 2021 00:00:00 +0000

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

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

Sat, 18 Dec 2021 00:00:00 +0000

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

Sat, 18 Dec 2021 00:00:00 +0000

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.