Forum as material design

Forum as material design

Various things about Spring that do not fit in any of the other forums listed below, including forum rules.

Moderator: Moderators

Post Reply
User avatar
Forboding Angel
Evolution RTS Developer
Posts: 14572
Joined: 17 Nov 2005, 02:43

Forum as material design

Post by Forboding Angel » 13 Jun 2015, 02:08

READ THIS DISCLAIMER GODDAMNIT!

Now that I have your attention, I want you to understand that I did this in 5 minutes (if even that long), I did it as an example, not a finished product. I went in and haphazardly changed values to get what I wanted in an effort to produce an example. Nitpicking about stupid shit like font colors or buttons or random aesthetics that have nothing to do with material design guidelines will net you a torrent of buttraeg and verbal assreaming.

If you have no idea how material design works, then stfu and do not comment until you view these links:

http://beebom.com/2015/01/google-material-design

http://android-developers.blogspot.com/ ... klist.html

https://youtu.be/Q8TXgCzxEnw

Obviously I skipped over a TON of the smaller aspects of material design in order to produce this example, please overlook that and think about what could be, not what is.

****** Don't make me regret spending my time to do this ******

Existing (actual day job) web designers, please comment:

Image

Image
0 x

gajop
Moderator
Posts: 3022
Joined: 05 Aug 2009, 20:42

Re: Forum as material design

Post by gajop » 13 Jun 2015, 02:57

The forum categories seem to take a lot more space. Is that a "Material design" thing that enforces spacing between elements so each element looks like a separate "Material"? The only thing I'd change with the topic elements is remove the gradient, but not sure that more spacing is needed.
Forboding Angel wrote:[Nitpicking about stupid shit like font colors or buttons or random aesthetics that have nothing to do with material design guidelines will net you a torrent of buttraeg and verbal assreaming.
Font seems small and hard to read, "Index page" seems to have shadows, "Topics", "Posts" and "Last Post" seem misaligned with the content below them, "Username" + "Password" editboxes need to have more contrast against the background (they look disabled right now).
Forboding Angel wrote: Existing (actual day job) web designers, please comment:
Maybe you should just talk to them (AF) in private? :P
0 x

User avatar
Forboding Angel
Evolution RTS Developer
Posts: 14572
Joined: 17 Nov 2005, 02:43

Re: Forum as material design

Post by Forboding Angel » 13 Jun 2015, 04:34

Look at it as a whole, not it's individual parts. That's what I was saying above. I'm not sure you quite understood.

Fonts and colors and crap can be changed easily, and there isn't any point bothering to discuss them. The point here is, hey: material design is cool. Our forum is cool. What if we combined forces for an epic display of awesome.

Additionally, you wanted transparency. The problem with that around here is the fact that because someone has read a page about css and design all of a sudden they think they are a web developer, which is the exact equivalent of me wading in the #sy and telling jk/devs how to design spring.

The links above give you enough basic info about material design to hopefully add relevant thoughts to the discussion. Make sense?

Going on about little nitpicky ui elements is annoying, because they are trivial and not going to stay like that anyway... They would be changed to fit the material design spec. Unfortunately I can't make a visualization of that quickly because phpbb is the shittiest designed forum software on the planet (hyperbole? Possibly.) and has a style orgy so big and nonsensical that Versace would be jealous (not hyperbolic).
0 x

User avatar
Forboding Angel
Evolution RTS Developer
Posts: 14572
Joined: 17 Nov 2005, 02:43

Re: Forum as material design

Post by Forboding Angel » 13 Jun 2015, 04:40

gajop wrote:The forum categories seem to take a lot more space. Is that a "Material design" thing that enforces spacing between elements so each element looks like a separate "Material"? The only thing I'd change with the topic elements is remove the gradient, but not sure that more spacing is needed.
Umm hmm this is hard to answer because the question is a bit, ehh, but I will try. Material design is making elements visualized as though they were physical. In this case, paper. Imagine each element as strips of paper on top of other paper. The purpose is to make things clean, easy to read (the separation of elements accomplishes this) and intuitive.

What I have done is not "true" material design, but simply a representation of it as applied to the forums. Of course, following the material design spec would cause for everything to be uniform and prettied and etc. This is just a very rough idea to get the creative juices flowing.

Edit: fwiw, technically the forums listings should ahve no space between the listings and only the categories would have space.
Last edited by Forboding Angel on 13 Jun 2015, 04:47, edited 1 time in total.
0 x

User avatar
Forboding Angel
Evolution RTS Developer
Posts: 14572
Joined: 17 Nov 2005, 02:43

Re: Forum as material design

Post by Forboding Angel » 13 Jun 2015, 04:46

An example of actual material design in a remotely similar layout... sortof:

Image
0 x

User avatar
Forboding Angel
Evolution RTS Developer
Posts: 14572
Joined: 17 Nov 2005, 02:43

Re: Forum as material design

Post by Forboding Angel » 13 Jun 2015, 05:11

This is closer to actual material design spec:

Image

Image

Better wrt spacing perhaps, Gajop?
0 x

User avatar
Jazcash
Posts: 5302
Joined: 08 Dec 2007, 17:39

Re: Forum as material design

Post by Jazcash » 13 Jun 2015, 13:29

Really nice Forb, although I still think the nav bar could use more padding. Perhaps make it more 'materially' too.

Image
Attachments
NavMaterial.png
(159.14 KiB) Not downloaded yet
0 x

User avatar
Forboding Angel
Evolution RTS Developer
Posts: 14572
Joined: 17 Nov 2005, 02:43

Re: Forum as material design

Post by Forboding Angel » 13 Jun 2015, 14:25

Very nice jaz! I like!

I'm wondering how bad of an idea a FAB (Floating Action Button - Material Design Spec for mobile apps) button for the forum would be? Of course it is the action button in material design. In this case it would take on the new post / new reply functions respectively.

I'm not sure a floating button on the forum would be a great idea though. In apps it's nice, but on the forum on mobile it might cover up information and if that were to happen then I say a resounding no. I'll think it over though and see if I have any ideas.
0 x

User avatar
qray
Posts: 377
Joined: 02 Feb 2009, 18:49

Re: Forum as material design

Post by qray » 13 Jun 2015, 14:54

I really like the "clean" look. Very nice! :-)
0 x

User avatar
AF
AI Developer
Posts: 20667
Joined: 14 Sep 2004, 11:32

Re: Forum as material design

Post by AF » 15 Jun 2015, 02:06

I wouldn't say this is material design, but it's interesting. I will say though that basic alignment and padding issues bring it down significantly, and it would look millions of times better if those were fixed. E.g. the icons in the first column, and the "Index Page", and the text in the menu block at the top should all align. Horizontal padding should match the vertical padding optically too. Also there should be no gaps between the forums in each section, only gaps between the sections, look at Googles Inbox and how it groups threads into collections

Image

Notice the Yesterday title forms a line on the left with all the icons and titles underneath it, it's the difference between a clean UI and one that has rough edges, and forces good consistent rules to implement.

------------------------------------

re: the bigger nav header, that's not the concept behind the design, and simply increasing the padding sounds like an aesthetic kludge rather than a design decision. The nav bar design I proposed is thin for a reason, not on a whim, and part of that design involves a homepage nav bar that would be bigger and bolder in a way I'm sure you'd approve of. However people I've spoken to like the navbar design and are moving to kill the existing header as it's an improvement, which it is, and I look forward to future iterations :)

Put simply, the nav bar when inside phpbb/mediawiki/etc is meant to get out of the way and be minimal, low maintenance, simple, and let the content underneath do its job. A big nav bar takes attention, and gets in the way. On the homepage this isn't necessarily a bad idea, but when we take a larger version of the navbar and apply it to something like Mantis, the design starts to buckle and strain, and it looks terrible.

We could design an awesome looking navbar, with bells and whistles. I like to think that's what was in mind when the current header was created. Showcasing awesome content in the header, how could it be bad? Then we had the overlapping bits with Arghs plane, followed by the StarWars units legs creeping into the menu. But it gets in the way. We're not here to look at the menu, we're here to browse the forums, read the wiki, etc A big fancy header doesn't add anything to this site worth having, wether it's a complicated artistic header, or simply a large one.

Instead we need to whittle down to what's absolutely necessary. Right now it bothers me that we have wiki, development and help in there, when the latter 2 were meant to replace the first. Perhaps there should be "development" and "help", which link to different parts of 1 page called wiki rather than 2 separate pages? I'm sure there's an answer. Report a bug could go under Help or Development too, and the new navbar removes the home link in favor of the logo
Attachments
Screen Shot 2015-06-15 at 00.55.55.png
(326.04 KiB) Not downloaded yet
0 x

gajop
Moderator
Posts: 3022
Joined: 05 Aug 2009, 20:42

Re: Forum as material design

Post by gajop » 15 Jun 2015, 03:57

Yeah the fixed padding and Jaz's subsequent navbar fix are both good.
I think the navbar should also highlight the current section (Forum), and also not have "Download" in red as it often implies "no content".
0 x

User avatar
Silentwings
Moderator
Posts: 3579
Joined: 25 Oct 2008, 00:23

Re: Forum as material design

Post by Silentwings » 15 Jun 2015, 09:34

Gotta admit that the only thing here that suggests "material design" to me is that this phpbb style has shadows and corners, which is not exactly huge common ground. But it looks like a nice phpbb style, so +1 from me to it.

It seems a shame to me to have nothing at all on the page that shows the engines graphics/gameplay capability. Being a bit easier on the eyes is nice but subtlety showing off what Spring can do is what's likely to catch the attention of people who might play/develop. Material design (well, despite the huge amount of "pointless" text, over-complicated icons, etc) is functional and intuitive but it doesn't advertise on its own. I don't think this is a detail; integrating complex images is something any designer would agonize over. Split discussion of front page to viewtopic.php?f=1&t=33589 - consensus was that its not the job of the forum/navbar to advertise.
0 x

User avatar
Silentwings
Moderator
Posts: 3579
Joined: 25 Oct 2008, 00:23

Re: Forum as material design

Post by Silentwings » 15 Jun 2015, 15:24

Split discussion of wiki entry points on the navbar to viewtopic.php?f=1&t=33588
0 x

User avatar
Forboding Angel
Evolution RTS Developer
Posts: 14572
Joined: 17 Nov 2005, 02:43

Re: Forum as material design

Post by Forboding Angel » 16 Jun 2015, 02:15

Silentwings wrote:Gotta admit that the only thing here that suggests "material design" to me is that this phpbb style has shadows and corners, which is not exactly huge common ground. But it looks like a nice phpbb style, so +1 from me to it.
You understand that it wasn't meant to be full on material design right? That would take a LOOONG time. I was just giving the idea and planting the seed. Don't get it twisted.
0 x

pedronimoip
Posts: 1
Joined: 22 Jul 2017, 01:22

Re: Forum as material design

Post by pedronimoip » 22 Jul 2017, 01:24

Here you can see good ideas for the floating action button.
0 x

Post Reply

Return to “General Discussion”