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.
- 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
- Bright color blocks
- Easy to read
- 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.
- Bright colors
- Unique shapes (the logo/header has triangles with patterns)
- Fun typography
- The buttons are colorful with interesting drop shadows
- 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
- Visually intriguing site header that incorporates links to various profiles
- 3D transformed site to look like everything is angled
- 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
Some thoughts on design.
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)
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" 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.
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.
- 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 about user-centered design and UX in the context of the Indie (social/federated) Web.
- 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
"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