Tiddlywiki Branding/UI Studies

[Duarte Farrajota Ramos]

Starting a new thread for this so as not to clutter the original one about the logo to much too much. I proposed a TiddliWyki logo desing, as as per request from Jerey Ruston I made a few mockups of the UI inspired by the proposed logo so as to match the same design language and visual aesthetics.
The logo was inspired by the the concept of Origami; just to give some context:

You can take simple text notes in TiddlyWiki but if you use that text in specific ways (links, wikiwords, macros etc,) you can create a very powerful dynamic database; much like you can take simple text notes on a sheet of paper, but if you fold it in specific ways that same simple sheet of paper can become a very beautiful and complex sculpture.

Disclaimer: These are just images designed in Inkscape, they are work in progress, and mere hypothetical proposals and concepts, they are not in development now or in the future and there is no implicit guaranty they ever will be (although that would certainly be pleasant). You may or may not like them and they are naturally subject to personal taste.

A few notes about the concept

• Most of the elements line up to a 32 x 32 pixel matrix
• All icons are full vector graphics in SVG made specifically for this purpose (some may be a bit cryptic, I know)
• Integrated the search results in a tab functionality (the one with the magnifying glass)
  
• Most colors are easily changed in batch for quick tests
  
• The palettes purposefully have few limited number of colors to keep them more coherent and subtle.
• One could enforce the already existing method of linking palette colors by default, but obviously allow for more granularity by breaking those links for those who like more customizability.

So without further ado, hope you like them:

[Albert]

Hi Duarte,

The preliminar concept looks very nice. I like specially the Orange one.

Just a thought: the concept for the tag line could be misleading (?), in the sense that it gives the idea of a hierarchy of tags. In TOC situations it makes perfect sense, but in case of using random tags with no interconnection it can be misunderstood?

Just an out loud thought.

Thank you!

Best regards,

Albert

[Jeremy Ruston]

Hi Duarte

Those are great, I like the way that you've provided several colour schemes, too, and the bright colours are attractive. And I never expected you to tweak the icon designs, but they work well too.

I agree with Albert about the tag pulls: plugging them together visually suggests a misleading linear relationship between them.

My main concern is that the design is quite boxy: there are very high contrast boxes around the logo and the toolbars. They are very distinctive and look good as an accent. But the worry is that their visual prominence demands the users attention, when I think that the users content within a tiddler should be the most prominent thing. Tiddler content should stand out visually above all the furniture that TW provides in the sidebar and at the top of tiddlers. The current theme resolves this by making everything except the tiddler content a pallid grey, which I think is a bit of a cop-out, and has led to a very clinical feel that is hard to love.

One idea might be to use more muted colours, but keep the vibrancy for hover effects. Of course, there are also parts of the UI that are supposed to attract attention, like alerts, notifications and wizards, which could probably do with being much less muted than at present.

I hope you're comfortable with this kind of dialogue as we explore the problem -- it's the kind of thing that probably drives professional graphic designers beserk!

Many thanks again for your dedication to this task,

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/584dc7d6-e2c3-4caf-bca6-f0cf539aaeb3%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Jeremy Ruston
mailto:jeremy...@gmail.com

[Duarte Farrajota Ramos]

On Friday, 10 April 2015 16:24:58 UTC+1, Jeremy Ruston wrote:

Hi Duarte

Those are great, I like the way that you've provided several colour schemes, too, and the bright colours are attractive. And I never expected you to tweak the icon designs, but they work well too.

Thans glad you like them. In retrospective I do feel they may be a little over-designed, stealing away way to much attention, might tone down the style a bit.

I agree with Albert about the tag pulls: plugging them together visually suggests a misleading linear relationship between them.

 Yes you and Albert are right, when I finished it it sort of reminded me of a breadcrumb bar, implying some sort of hierarchy or relationship between them which is wrong. Gonna rework their style a bit to reflect that.

My main concern is that the design is quite boxy: there are very high contrast boxes around the logo and the toolbars. They are very distinctive and look good as an accent. But the worry is that their visual prominence demands the users attention, when I think that the users content within a tiddler should be the most prominent thing. Tiddler content should stand out visually above all the furniture that TW provides in the sidebar and at the top of tiddlers. The current theme resolves this by making everything except the tiddler content a pallid grey, which I think is a bit of a cop-out, and has led to a very clinical feel that is hard to love.

This is true, I didn't have that "duality" of the content in mind while drafting these concepts, but that is something important that I'll have that inconsideration from now on. I'll tone down the vibrancy of the tools area colors and think of alternative method to distinguish them.

One idea might be to use more muted colours, but keep the vibrancy for hover effects. Of course, there are also parts of the UI that are supposed to attract attention, like alerts, notifications and wizards, which could probably do with being much less muted than at present.

I have a feeling you might like this idea I'm having to better differenciate the content from the tools area, which, if successful, might even allow for some coloring (albeit subtler one) in the tool area without stealing too much attention away from the content. I'll try to work on that and post it later.

I hope you're comfortable with this kind of dialogue as we explore the problem -- it's the kind of thing that probably drives professional graphic designers beserk!

It's no problem at all, these kind of things are always inherently iterative so some back-and-forth is expected and even encouraged. Deadlines are generlly the worse, but for now at least, this feels more like fun and a break from work so feel free to comment all you like.
 
I'll try to keep working on my concept, if I'm lucky I should get an opening tonight and I'll post some new images.

[Duarte Farrajota Ramos]

My apologies for the delay in replying, I've been a little busy but finally managed to get back at this.
So keeping the 'origami' theme and thinking about what you said concerning the separation of content and tools or the sidebar and the tiddler river I came up with the following concept.
It basically tries to represent the whole sidebar as if in a background planed behind the tiddler river, like it was tucked beneath it (the shadow tries to mimic that). The toolbars and elements behave as ribbons of paper sticking out from behind the tiddler area as bookmarks stick from the side of a book.
This would emphasize the the importance of the tiddler river as the main content foreground element above the secondary tools under it, while hopefully allowing for a more or less colorful sidebar without stealing so much attention away (or keep the more monochrome tone which I think works very well currently). Here are a few previews with colored or more muted sidebars, in lighter or darker themes.

This visual cue has the additional advantage that it could be further extended in a consistent manner for an hypothetical "hide sidebar" function. When is activated, a small portion of the sidebar could still be displayed at the edge of the browser window, with perhaps a few select essential tools still "tucked under" the shadow of the main tiddler view, keeping some reduced functionality while enlarging the available view area.

Ideally this could be done in conjunction with a default centered view for the tiddler river, with shadows on both sides, to totally assume it's importance as central piece, although I understand this would steals a lot of potential sidebar space.
These elements (like the toolbars sticking out, the search bar or even the tag pills) could gain a more skeuomorphic form with stronger paper like visual (like with stylized bent corners and more shadows), if that's what you are looking for, although I think it might be too much for users who prefer a simpler look and may spoil the more neutral look.

Other notes:

• Reworked the tag display to not imply any relationship between them
• Simplified the icon theme to be less intrusive
• Ideally tiddler headers would be sticky type 'always visible'
• Added those 'bookmarks' on the side of the headers as shortcuts for tiddler permalink/permaview or as a 'scroll to top' shortcut
  

 

Let me know what you think, Jeremy, or please share any other ideas or expectations you have.

[Matthew DeAbreu]

I really like your mockups, they are absolutely beautiful. I particularly like your logos for TW they are gorgeous!

Back to the topic at hand, these designs. I agree with Jeremy that the content should be the focus, and to an extent you have accomplished that by using the shadow over the sidebar. My problem with it is that the shadow is very large and despite that the colours are very bold. When I first look at the image my eyes are immediately drawn to the very vibrant colours rather than the content; I see the logo, the tools, the recent tiddlers; then my eyes are drawn to the river and immediately to the title of the tiddler and the tiddler tools and lastly to the content. Now when I try to read the content my eyes keep wandering towards the bright colours.

I really like the colours but I think they should be accents, little flares of colour to brighten the page and draw your eyes to important things but not bright enough to distract.

As an example here is the homepage of another wiki engine I have used called DokuWiki. You can see they have done the same thing with a drop shadow to make the content stand above the rest of the page but it is subtle and you don't really consciously notice it. If you look at the use of colour it again is very subtle; the logo at the top of the page, the large green download button, the images, and finally the green text that links you to other wiki pages (tiddlers). The rest of the page is a mix of blue and grey; it almost disappears into the background as you read the content and only becomes relevant when it's needed.

Anyways, that's an end to my ramblings. I'm really looking forward to seeing new and improved designs; and how they will influence the future of TiddlyWiki!

[Duarte Farrajota Ramos]

Hi Matthew thanks for the comments, colors are indeed a bit bright, here is a toned down version that is easier on the eyes and steals less attention from the user, and would probably go better as standard palette, then again colors are always meant to be user customizable.
The shadow is also big, but I feared that if made too small the effect could be lost. I think it can be made slightly smaller by default. I even thought that it could mistakenly signal the user that the interface was somehow blocked or disabled, so maybe it could be made as an effect that would disappear when the toolbar was hovered (?).
In this version it is about two thirds of the original size, could still shrink further if needed. Also slightly reworked other details including the shrunk sidebar, to have an 'expand arrow' and a 'shrink further' arrow.

                                                                                 

[Matthew DeAbreu]

Wow! As someone who likes the Muted palette in TiddlyWiki that looks fantastic! Talking about shadows reminded me of Google's Material Design (http://www.google.com/design/spec/material-design/introduction.html) and how every element is almost like a piece of paper. The logo you've designed you called it origami which is of course paper; we could skip the skeumorphism and go for a slightly more Material design where everything is layered and they all cast shadows based on their Z positions (and importance) with a consistent "sun".

Now I'm curious to read through the Material Design specs and see if I can get anything interesting.

[Duarte Farrajota Ramos]

Here are two completely different concepts with a vertical bar I happen to conjure up today. Still incomplete but I quite like them the way they look.

                                       

[Jed Carty]

I really like how this looks. I have been trying to figure out how to proceed with the icon menus I have made. I think that a combination of what you are showing here and the mobile menus talked about in this other thread may be the way to go. For the moment I am not planning on making a full theme like you are showing, just the menu part of it.

I hope that you posted these in the hope that someone may make them and that you don't have a problem with me shamelessly stealing some of the ideas.

[Duarte Farrajota Ramos]

Hahah not at all, I am glad you like them.
Like I said before my html/css skills are very limited to little more than copy pasting other people's work, so I was actually hoping someone would eventually actually implement them.
I made these more as mockups at Jeremy's request so, please go ahead and steal them :)

[Duarte Farrajota Ramos]

Here is a more complete version with a few tweaks. Added UI for custom user tabs which was missing and made a simple animation of how tab switching could work:

                           

[Jeremy Ruston]

Hi Duarte

Apologies for the delayed response. These look good, thank you for sticking with this task!

I think that what you've got here would make a terrific theme for TW5 but I'm still concerned that it is visually distracting enough to overwhelm the users content. When I do the "squint test" on the mockups I find the shadow to be very prominent. It may largely be a matter of contrast but I think it's also that the shadow doesn't have a strong meaning or purpose, it's just there as a background for the tab menus. If one were to ruthlessly try to remove everything that is ornamentation perhaps it would be the first to go.

To me, the most prominent thing should be the individual tiddlers; the display is a canvas for the user to display and manipulate their tiddlers. After that there are two separate elements to the display: the branding/identity provided by the title and subtitles, and the sidebar icons/menus. The sidebar stuff needs to be usable but I think should be visually subordinate to the branding.

It's a shame to be working on this remotely, this is the sort of discussion that might be best bent over a table together with a pad of paper. Anyhow, many thanks again,

Best wishes

Jeremy

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/0c9aa3c4-13a3-426e-9d2d-9ffad1306bfe%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Jed Carty]

I will leave creating the theme to someone with a better eye for graphic design than I have, but I am working on that sort of popout menu. I have a simple macro version here, there will need to be some fancier css to set the height and widths correctly, but I don't think that will be too terribly difficult.

In your mockups the search bar is always present but you have a dedicated search menu. Do you want this to open the search menu whenever you start typing or is it supposed to search through the tab you have open? I could see both being useful.

[Duarte Farrajota Ramos]

Hi Jed, that is looking extremely cool, great work. The idea about the search bar was to keep it always visible even if it isn't the active tab, but upon clicking on it or typing a search string it would activate the search results tab, muh like it happens here https://groups.google.com/d/msg/tiddlywiki/bTiOu_migHs/OLRZVSKC1jkJ
The search results would be global tiddlywiki ones, not the current tiddler.

@Jeremy Funny that you mention the "squint test", posting them here I get a much better overview of the mockups provided by the smaller thumbnails some times exposing the fragility of the design. The shadow was meant more as a visual cue to "push" the side bar under the main tiddler content, it could certainly be much softer or totally eliminated. The colors could also be tweaked to emphasize content more. I'll see what I can come up with if I get a chance.

[Mat]

Jed Carty wrote:

I will leave creating the theme to someone with a better eye for graphic design than I have, but I am working on that sort of popout menu. I have a simple macro version here, there will need to be some fancier css to set the height and widths correctly, but I don't think that will be too terribly difficult.

 This is EXACTLY what I need for something I'm working on that will soon be presented. Thank you for sharing Jed!!!!

<:-)