design
๐๐
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
- Method: https://brutalist-web.design/
- Examples: https://brutalistwebsites.com/
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.
- create posts - posting interfaces
- ...
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.
- http://pitchfork.com/features/cover-story/reader/daft-punk/
- Anecdotal opinions from in-person conversations with web designers at Brooklyn Beta 2014 noted universally that parallax design was cheesy and to be avoided.
Articles
Articles about user-centered design and UX in the context of the Indie (social/federated) Web.
- 2009-07-01 Ben Werdmรผller Building the user-centered 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
- icon
- building-blocks
- principles
- projects
- create
- admin
- typography
- design-satire
- 2017-10-06 'Our minds can be hijacked': the tech insiders who fear a smartphone dystopia - examples of dark silo designs that indieweb design could counter with designs that enhance personal focus, attention, and possibly even productivity, by help people shift from using silos to indieweb tools and services.
- 2013-06-10 Brad Frost: atomic web design
- 2015-08-11 Alla Kholmatova: The Language of Modular Design
- 2018-06-29 Fast Company: Why techโs favorite color is making us all miserable (tl;dr: blue bad, orange/red good)
- Web Design Museum with over 900 carefully selected and sorted web sites that show web design trends between the years 1995 and 2005
- Donโt be this designer, unless itโs for your own website, in which case, go wild with delightful abandon: https://twitter.com/heydonworks/status/1097235672249839619
- "Designer 1: Hey, I put this little... thing in. What do you think?
Designer 2: OMG that's delightful!
Designer 1: I know right? So delightful.
Designer 2: YOU'RE delightful.
Designer 1: No YOU! YOU'RE delightful.
User: What fresh fucking arse candy is this?" @heydonworks February 17, 2019
- "Designer 1: Hey, I put this little... thing in. What do you think?
- How NOT to decide to remove features: https://twitter.com/SlackHQ/status/1103832235122274304 (see top message of thread and its replies for more)
- "It wasn't a widely used slash command, so we've done some spring cleaning of the Slack clients." @SlackHQ March 8, 2019
- https://humanebydesign.com/
"A social network that has the usersโ interests in mind would look completely different than todayโs Twitter and Facebook. It would be designed to help you with your social interactions, quickly and efficiently, not trying to make you spend maximum amount of minutes on the site. Facebook, and increasingly Twitter (as their owners have started demanding profits), are doing the opposite. They . . . steal your time, make you do pointless stuff, filter in advertising in your news feeds, delete pages and users organising protests etc, mine their โbig dataโ to find the best ways to use our weaknesses for pointless click-bait..." —Hannes Mannerheim of Quitter as quoted in The Case for Alternative Social Media by R. Gehl
- Good examples of indieweb design: https://tatianamac.com/ (especially https://tatianamac.com/speaking/), https://chasem.co/ โ both via https://twitter.com/julesforrest/status/1162802903288991744?s=19
- Beware of meaningless consistency in design: https://twitter.com/jmspool/status/1193719439772078080
- "The downsides of design systems." @jmspool November 11, 2019
- ๐ฏ+ post tweetstorm design rant by Amy Hoy, highly recommend for anyone here who makes anything a user sees or touches: https://twitter.com/amyhoy/status/1209694851001769984
- "1. most designers just copy each other, most of the time.
before apple bought soundjam and elevated it to iTunes, there was a huge variety in mac app design
now there is not." @amyhoy December 25, 2019
- "1. most designers just copy each other, most of the time.
- Be critical / skeptical even when seeing design examples from those who should be experts: https://twitter.com/bobbie/status/1271548505253789696
- "As Anna points out, this @sfchronicle bit on the covid risk of different activities is BLOODY AWFUL ABOUT COMMUNICATING RISK
Note, low risk activities are RED and high risk are GREEN
Low risk to the LEFT and high risk to the RIGHT
https://www.sfchronicle.com/bayarea/article/From-picnics-to-pools-coronavirus-experts-rate-15334210.php" @bobbie June 12, 2020
- "As Anna points out, this @sfchronicle bit on the covid risk of different activities is BLOODY AWFUL ABOUT COMMUNICATING RISK
- ^^^
- Apple design principles presented in an uplifting video: https://twitter.com/schlaf/status/1275047612215889921
- "โThere are a thousand noโs for every yes.โ
Well done @apple.
https://t.co/tEweKHVr7k" @schlaf June 22, 2020
- "โThere are a thousand noโs for every yes.โ
- https://simone.computer/#/webdesktops
- 2016-10-12 Minimum Viable Basic Human Decency, a list of use-cases / user scenarios that nearly every online product or service should design for
- Opportunities for IndieWeb designs to be better than silos, even better than Apple these days: 2019-05-08 Fast Company: I wrote the book on user-friendly design. What I see today horrifies me
- 2021-04-15 WaPo: We instinctively add on new features and fixes. Why donโt we subtract instead?
- See https://opensourcedesign.net/ for ideas and welcoming folks
- Brainstorming: Broadening design beyond yourself: Consider designs that adapt to a wide range of people: 2022-05-12 My Grandma is Not a Cyborg / On the oppression of everyday objects, and hacking the design gap.
- Inspiration: HyperCard / classic B&W Mac System UI and transitions: https://beyondloom.com/decker/tour.html
- Useful design considerations for any software/service you build for more than yourself: 2017-05-10 Lessons (so far) from Mastodon for independent social networks
- Internet Archive of original post: https://web.archive.org/web/20220119053415/http://achangeiscoming.net/2017/05/10/lessons-mastodon-independent-social-networks/
- https://inclusive.microsoft.design/
- clever & fun web zine design: https://thehtml.review/
- 2023-03-20 The age of average โ observations with visual examples of design convergence in various crafts & media, with a critique of becoming average, and yet demonstrating a desire for simpler & more consistent interfaces for a variety for experiences
- relatively simple/minimal and fast photo blog design: https://brr.fyi/
- https://heather-buchel.com/blog/2023/10/why-your-web-design-sucks/ post on how organisational structure has alienated designers from the web
- Example: simple design single page site with lots of responsive design for various widths / aspect ratios: https://lip.pe/
- Don't do this: 2023-10-04 You're All Set: Casual Language, Embedded Advertising, And The Decline Of Human-Centered Design
- inspiration for a personal home page website: https://www.arianalutterman.net/
- Minimalist design: https://amtrack.live/ โ also a good example of writing a service for information about something that is more usable on the wifi provided by the something itself! (Amtrak info usable on the wifi provided on Amtrak trains!)