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.
<https://lh3.googleusercontent.com/-a6y1WK6Sbt8/VTFPtXT1oSI/AAAAAAAAJUI/THBD2A4RR-Y/s1600/Tiddlywiki_UI_Mockup22.png>
On Friday, 17 April 2015 17:35:33 UTC+1, Matthew DeAbreu wrote:
>
> 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.
>
> On Thursday, April 16, 2015 at 3:32:01 PM UTC-7, Duarte Farrajota Ramos
> wrote:
>>
>> 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.
>>
>>
>>
>> <https://lh3.googleusercontent.com/-v1ShKeeK3IU/VTA3j-SUfiI/AAAAAAAAJT4/iYJx88DDyvE/s1600/Tiddlywiki_UI_Mockup21.png>
>>
>>
>>
>>
>>
>>
>> On Thursday, 16 April 2015 17:57:16 UTC+1, Matthew DeAbreu wrote:
>>>
>>> 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.
>>>
>>>
>>> <https://lh3.googleusercontent.com/-s9x07M9smxs/VS_mWxLrT0I/AAAAAAAAIFo/UtCX88ZJo6I/s1600/dokuwiki.png>
>>>
>>> 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!
>>>
>>> On Wednesday, April 15, 2015 at 7:18:25 PM UTC-7, Duarte Farrajota Ramos
>>> wrote:
>>>>
>>>> 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.
>>>>
>>>>
>>>>
>>>> <https://lh3.googleusercontent.com/-bnXZj73WIPc/VS8Qy5wlErI/AAAAAAAAJTI/CWqdIOWf_8A/s1600/Tiddlywiki_UI_Mockup10.png>
>>>>
>>>>
>>>> <https://lh3.googleusercontent.com/-1gKpgrCC0dU/VS8QutZhhcI/AAAAAAAAJTA/wx_Yz4O92Zw/s1600/Tiddlywiki_UI_Mockup11.png>
>>>>
>>>>
>>>> <https://lh3.googleusercontent.com/-zrH_EKSiWpQ/VS8QqVu5fVI/AAAAAAAAJS4/OTF119bgfUQ/s1600/Tiddlywiki_UI_Mockup12.png>
>>>>
>>>>
>>>> <https://lh3.googleusercontent.com/-xjspYaau3rE/VS8QTNckVWI/AAAAAAAAJSg/I-7_i0W_HQ0/s1600/Tiddlywiki_UI_Mockup15.png>
>>>>
>>>>
>>>> <https://lh3.googleusercontent.com/-foI1Up2ELqk/VS8QZ_602JI/AAAAAAAAJSo/8aPH90D6Md4/s1600/Tiddlywiki_UI_Mockup14.png>
>>>>
>>>>
>>>> <https://lh3.googleusercontent.com/-Kk3h01a3gIM/VS8Qhr4CkDI/AAAAAAAAJSw/aFZ7e-9K4XY/s1600/Tiddlywiki_UI_Mockup13.png>
>>>>
>>>>
>>>> <https://lh3.googleusercontent.com/-v__A8yYKQ-U/VS8QPNtDDvI/AAAAAAAAJSY/UlIhoElbhH8/s1600/Tiddlywiki_UI_Mockup16.png>
>>>>
>>>> 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.
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> <https://lh3.googleusercontent.com/-tACY1agMsiU/VS8U479adHI/AAAAAAAAJTU/4AhPQTflfBo/s1600/Tiddlywiki_UI_Mockup17.png>
>>>>
>>>> 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.
>>>>
>>>
--
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 [email protected].
To post to this group, send email to [email protected].
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/5b3e42d7-2c2c-4566-bb70-5474c7f2dda0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
