design

From IndieWeb

Design is a term that broadly encompasses graphics & other aspects of isual design such as typography, user interface (UI), user experience (UX), information architecture (IA), URL design, and everything else that affects how users experience a web site & its pages and interact with them.

IndieWeb Examples

Below are some examples of interesting website designs, specifically ones that are personally unique rather than matching standard CMS or corporate approaches. When adding examples, it is great to add some summary bullets about what you found interesting, unique, or fun.

Kicks Condor

  • 8-bit style design
  • The background color and border design is based on the type of post
  • Sound effects when openning and closing a post
  • Grouped by day

Ines Montani

  • Bright color blocks
  • Easy to read

Ana

  • Fun border designs with the dashed line styles
  • Feels like a collage style with the background colors behind the post block, the post date and the post title. Feels like they were cutout and pasted in the section.
  • Different post types have a different feeling/design, such as articles with the title and a plain brown bkground, and photos with a bright orange background.

Andy Bell

  • Bright colors
  • Unique shapes (the logo/header has triangles with patterns)
  • Fun typography
  • The buttons are colorful with interesting drop shadows

Mina Markham

  • Nice prominent accent color (pink)
  • certain links have yellow background, making it look like it's had a highlighter used
  • Page headline uses a very personal font
  • Clearly organized and easy to read

Andy Barefoot

  • Visually intriguing site header that incorporates links to various profiles
  • 3D transformed site to look like everything is angled

Tatiana Mac

  • Fun visual effects (especially section borders)
  • The Works area has a really nice grid layout with great call to actions
  • The Writings section uses a pull-quote as the primary content to draw people in and then links to the article with the title of the article.
  • A fun release notes section of the website

Styles

Different styles of design

Brutalism

Thoughts

Some thoughts on design.

Minimalism

What's the minimum viable (for any particular feature) UI (MVUI) you could implement and start using via your website? - Tantek 11:25, 15 May 2013 (PDT)

Related article: https://petermolnar.net/minimalism-is-not-asceticism/

Prioritize Through Use

Once you design/implement that MVUI and use it, by actual use in the wild you'll come up with a much more informed set of next-most-important-to-you features to implement. - Tantek 11:25, 15 May 2013 (PDT)

Incremental

It's OK (and even often good!) to make incremental improvements to the design, however small or conditional.

For example, every time you reduce the number of situations where the user sees an error and/or has to file a support ticket, the likelihood of an overall better user experience is increased.

And on the contrary, avoid making such incremental improvements depend on other incremental improvements that can be done independently or later. Such dependencies are a milder form of the completeness trap.

UX Before Infrastructure

There is a misdirected priority/desire (often among developers/engineers) for things like:

  • "a general message producer/consumer so I can implement it once"[1] or similarly
  • a general parser so I can implement it once

"...and then spend the rest of my time focusing on the UX" (ibid)

This is the kind of reasoning that led people to push for XML over everything else.

It was a misplaced focus on solving infrastructure *before* UX.

It turns out that doesn't actually help you solve the UX, which is the real challenge.

On the contrary, if you have good UX, then the infrastructure/plumbing can be almost anything, and swapped out later too.

This is perhaps a key distinguishing feature/aspect of the indieweb and IndieWeb efforts.

UX Before Protocols

Start with the MVUI/UX that you want on your website and implement accordingly.

When you reach a site-to-site boundary, i.e. an IndieWeb-to-IndieWeb boundary, in whatever feature you're designing, creating, iterating, use the desired UX to drive the design of a minimal protocol.

Never shoehorn upwards, that is from protocol up to UX - as that is the tail wagging the dog.

At the end of the day, the UX is what matters, regardless of attributes, protocols, etc.

And without UX, that is if you don't know what UX you want, you'll overdesign/overengineer your protocols & formats, as nearly all protocols & formats are.

On the IndieWeb, we focus on UX first, and then as we figure that out we build/develop/subset the absolutely simplest most minimal protocols sufficient to support that UX, and nothing more.[2]

Screenshots

See specific features (e.g. from IndieMark) and building blocks for screenshots and to add more, e.g.

Experiments

There are various design experiments which may be useful as sources of inspiration, or may indicate fleeting fashions or ephemeral design trends:

  • parallax scrolling - use of scrolling to change perspective / layout of what is on the page, e.g.

Articles

Articles about user-centered design and UX in the context of the Indie (social/federated) Web.

Brainstorming

Emotional Design

Consider a separate section or likely page on explicit IndieWeb emotional design that is focused on maintaining and improving the emotional health and intelligence of the primary owner and user of a personal site, as well as those that read and interact with it, in contrast to harmful addiction and divisiveness designs of silos. https://en.wikipedia.org/wiki/Emotional_Design and https://www.cnbc.com/2020/06/09/harvard-psychology-researcher-biggest-traits-of-emotional-intelligence-do-you-have-them.html

See Also

Retrieved from "https://indieweb.org/wiki/index.php?title=design&oldid=97579"