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/d86d9f4a-2fa9-47fd-945b-260b6e0faf7e%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
