Proposal - HelloThere Tiddler Using a Card-like Style

[duarte.framos]

Here are some initial mockups of how I’d envision bento grids for TiddlyWiki.
A few considerations I felt more adequate:

1. More pictorial approach - Bento layouts work better with some accompanying by graphical elements, even purely accessory.

2. Itemized text - Messages should be less verbose, succinct and quick to parse. Walls of text look daunting and risk losing the audience.

3. A centered main tile with a stronger color for the tag line/slogan

4. A consistent color palette - TiddlyWiki.com default palette seems to favor bluish tones, so I designed this around variations of cool colors.

5. Revised item list - There were the items I personally felt were the main selling points for TiddlyWiki, but are obviously subjective.

There a few versions below, a lighter one with saturated colors over light backgrounds, and a heavier one with white content over denser background and one with outlines and white backgrounds only. The lighter ones emphasize the tagline more but are softer.

Option 1 - Light theme

Option 2 - Heavy theme

Option 3 - Outline theme

Open questions:

1. Are rollovers technically feasible? I’m not imagining anything overly fancy, but if we could we could change the content of each tile on hover, we could show an “expanded” version of the text with a more elaborate description of each item, possibly including multiple relevant links where needed. Downside being it is not very “mobile” out touchscreen friendly. If we do want to get fancy, some fade effect or “card flip” would be nice to have.

Are the colors adequate? I went for this “winter palette” around cool colors which felt matched the default blue accent, but we could go for something else. Maybe some soft gradients for background.

1. Do you feel items are adequate? There were pretty much based on my personal perception, but I’d very much welcome a “technically accurate” curation.

Nothing is set in stone, everything is pretty much open to debate, let me know your thoughts.
All graphics are available as lightweight SVGs for embedding. I’ll make them all available under permissive license.

@jeremyruston Sorry, just making sure you got pinged to the new thread.

[Mario]

Nice work!
I did move this post into a new thread, so it can be discussed seperately

[pmario]

Very nice!

I do like the “Outline” version the most, because it makes the centre topic stand out very well.

The colours of the “Outline” work well for me. - We will need to check text and icon foreground colours with the different palettes. (Which is also true for all other “Landing Page” tiddlers) - but that’s for the future

The “Safe” card may be “Future Proof”. In my mind “Safe” stands for Encrypted - Just a thought

“Anywhere” … Is it “on” or “in the cloud”? – (I am not a native English speaker - so not sure)

“Customizable” … IMO “make it your own” would be better

May be: “Extensive and Welcoming Community”

---

About “rollovers”: I think if users click a “card” it should open a new tiddler, which goes into more detail. So we do not have problems with mobile devices.

Just some thoughts
-m

[linonetwo]

Tiddlywiki is already in Card style. That’s why I choose it on the first place, I want an app where every note is a card or at least look like a card.

What you are describing is Win Phone style Masonry layout. I like this too my phones look like this:

And What mobile launcher are you using, how will you design the TW layout launcher? looks like it.

[duarte.framos]

@Mario

I did move this post into a new thread, so it can be discussed seperately

Thanks, feels more adequate here.

@pmario

The “Safe” card may be “Future Proof”. In my mind “Safe” stands for Encrypted - Just a thought

Good point, maybe some “cupping hands” icon would be more adequate here

@pmario

“Anywhere” … Is it “on” or “in the cloud”? – (I am not a native English speaker - so not sure)

I struggled with that one myself, you are probably right . Proof reading from a native speaker is also welcome.

@pmario

“Customizable” … IMO “make it your own” would be better

Indeed, my mistake will be fixed in the next round. Should have proof read once more.

This is the type of feedback I was looking for. Thanks PMario

@linonetwo

What you are describing is Win Phone style Masonry layout.

It does remind me a lot of the old Windows Phone “Metro” layout. Never used it myself, but was always fond of its aesthetics.

[pmario]

@duarte.framos

Good point, maybe some “cupping hands” icon would be more adequate here

Found this one: - seems to be from VectorStock.

May be the hand with a small Motovun-Jack (May be a bit too cheesy)

[Scott_Sauyet]

This looks great!

@pmario

I do like the “Outline” version the most, because it makes the centre topic stand out very well.

Agreed. It also simply feels the most clean.

@duarte.framos

Are the colors adequate? I went for this “winter palette” around cool colors which felt matched the default blue accent, but we could go for something else. Maybe some soft gradients for background.

It would be useful if the colors came from the current palette.

@linonetwo

What you are describing is Win Phone style Masonry layout. I like this too my phones look like this

See also: Web design trend: bento box.

@duarte.framos

Are rollovers technically feasible?

I’m sure they are, just with pure CSS; no TW tricks should be necessary.

@duarte.framos

Downside being it is not very “mobile” out touchscreen friendly.

We could play with long press. In many environments, that mimics browser hover.

@duarte.framos

If we do want to get fancy, some fade effect or “card flip” would be nice to have.

There have been some examples of TW card flips, but I don’t recall details now. Perhaps something by @telumire? But one alternative I could imagine is if on hover, the image shrinks to 20-30px and moves to one corner as the hidden text fades in in place. And of course the reverse would happen when hover completes.

[TW_Tones]

I think it importiant for the initial views to be easy to read, selective, not overly complex but its should not only be this.

• Yes a bentobox summary, but one card should go to a comprehencive list.

I have learned from my own behaviours I dont like finding content that is too “dumbed down”, the top 10 features are only the top 10. Thus I think it importiant to provide access to comprehencive content in which case this bento box style is not adequate, There are a few threads in talk.tiddlywiki and the old google groups that brainstormed the functions, features and posibilities of tiddlywiki.

• Once one is persuaded the tiddlywiki may have something to offer (Inspired by a bento box) there is great value letting the visitor to scan and read a comprehensive list, enthusiastic people will spend the time on an infinite scroll to read a lot of content.
• We need to find another way to present items on such a list, perhaps like a features list.
  • Short name, description and details
• Perhaps such a list could be filtered on major groupings such as;
  • Server features
  • Hosted wikis (tiddlyhost)
  • Customisability
  • Asethetics/look
  • Data independance manipulation import/export
  • Editions/applcations
  • Website/App
  • In local custom browsers and host access
  • Plugins
  • Open Source
  • etc…

[srbt1]

Wow, I like these mockups very much @duarte.framos – thank you for making them!

Like earlier commenters, I like the outline view best, although to answer your question below, at the moment I think the foreground-background / colour contrast could be made more readable and accessible:

@duarte.framos

Are the colors adequate? I went for this “winter palette” around cool colors which felt matched the default blue accent, but we could go for something else. Maybe some soft gradients for background.

If colours are hard-coded, as in the mock-ups, you might find this website helpful for choosing high-contrast foreground and background colours throughout: WCAG Color Contrast Checker (it uses the W3C’s Web Content Accessibility Guidelines v2.1 – click to open overview page – to help with choosing accessible and readable contrasts). For instance, the “extensive community” bento area on the right of the outline mockup has a contrast ratio of 1.72:1 according to the WCAG Color Contrast Checker webpage, when a ratio of at least 7:1 is rated as most readable and accessible, according to the WCAG 2.1 guidelines linked to above.

If you go with colour choices determined by palette, the most accessible and readable option might be simply <<colour foreground>> and <<colour background>>. However, this would not be very colourful! My own view is this would still be a really eye-catching design, but that is obviously just my opinion!

Either way, it was a pleasure to see these mock-ups: thanks again!

[duarte.framos]

Thanks for the feedback guys glad you like them.
Here are a few more variations just to put them “out there” see what works best.
Changes:

• Cupping hands for the “Safe” card
• Fix typos and grammar
• Adjust some text sizes
• Soft gradients in the background filled version
• Soft background in the outline version for a better sense of unity

Option 4 - Light theme

Option 5 - Gradient backgrounds

Option 6 - Outline with soft backgrounds

As for the colors, I initially imagined them as hardcoded, but now that you mention it I’d also love to see them come from the tiddlywiki palette instead, for the sake of accessibility and integration. The issue is I don’t think palettes currently have the necessary subtlety for an elegant bento grid. If this could be improved upon, then that would definitely be the way to go.

Either way from my part. I’d make the SVG icons color agnostic, so they can inherit from wherever CSS tells them to.

When I asked about the feasibility of the hover effects, I was wondering more about Jeremy’s willingness to invest the time and resources to make them work, since with some CSS tricks they are probably not to hard to make.

Either way, If Jeremy is willing to make them, the intent would definitely serve the purpose of elaborating on the intentionally terse topics. The “back of the card” could have a more verbose description that could indeed link to a complete list of features or myriad of relevant tiddlers concerning the various topics.

[duarte.framos]

@pmario

May be the hand with a small Motovun-Jack (May be a bit too cheesy)

I did try to sneak in a cat somewhere in there, but it never really integrated and always felt out of place.

If Jeremy was open to the idea, I was hoping to propose also revamping the Find out More tiddler. It currently has a mix of very differently styled images that feel very dissonant.
I’d love to make a new set of images featuring various depictions of cats illustrating all the links there, maybe in the style of my previous Motovun Jack renditions.

[Scott_Sauyet]

@duarte.framos

Here are a few more variations just to put them “out there” see what works best.

These are great too. If the original ones were 1, 2, 3, and these ones 4, 5, 6, then my favorite is still 3, but I also like 5 and 6 quite a bit.

The cupping hands looks great.

As to hover animations, I’ve thought of one more which I imagine would be quite useful to show additional content. I don’t quite know how we could accomplish it, but I’m sure some experts could show us: On hover of a card, that card expands atop the current grid in the same shape/color/gradient it currently has, at a larger scale, with additional content fading in. If the whole grid is 4 x 4, then a 1 x 2 card expands to 2 x 4, and a 2 x 1 expands to 4 x 2, each pinned to the edge(s) of the main grid they share. I’m not sure how the 2 x 2 grows (if at all). And it’s unclear how much the 1 x 1’s should grow. Should they grow to 2 x 2 to grow by the same proportion as the rectangles, or should they grow to 2 * sqrt(2), to end up covering the same portion of the original grid as the rectangles? Or perhaps they just grow to 3 x 3, which fit the grid well, and take only slightly more space than 2 x 4? I worry that this might be difficult to do with pure CSS, but I think it would be a great UI.

[TankinatorFR]

I do prefer you options 3 and 6. 6 more than 3.
Although I feel that TiddliWiki and the catchphrase would need to be more “separated” from each others.
Maybe a different police ? Or more difference in font size ?
I don’t know, I feel that tiddlywiki feel almost secondary, useless…
But I do know that I have an unusual way of analyzing spaces, so maybe it’s making me unusually sensible to this.

About the cat, what about a really fainted watermark on the background of the central image ? Or maybe the cat could be standing/crouching on the text itself, as if it was a floor. But that’s trickier to do, except if we use an image.
If I was to combine my previous statement about the catchphrase, I might suggest to reduce the size of of the catchphrase so that it only take two line :

Make something
Of your notes

And then have the cat moving in-between the words. Like standing on the your and curving in-between make and something, his paws catching the top of words as if he was towing himself out of this narrow space. Having the little cat flex might symbolize the flexibility of tiddlywiki.
But I might be making things to complicated… That wouldn’t be a first for me.

[duarte.framos]

Yeah, the central tile does feel a bit off. Maybe I’d ditch the TiddlyWiki altogether. What it needs is a logo or an emblem, but we don’t have an official one.

A watermark background cat could work really nice.

I imagine a faded cat head with a distant, brooding, 1000-yard stare, meditating deeply about the slogan “Make something of your notes” could quite transmit that “inspirational image” vibe. Or maybe just a full body cat silhouette facing away staring into the distance.