Design Guidelines

[neoncitylights]

This has been an idea for a long time that I've been trying to work on myself but have failed to do so, so here I present the idea to the public: A design guideline for Brickimedia! This is an idea that I believe has the potential to help the site for the better, and it's definitely something that would have a much more positive result with collaborators working together instead of a one man job, so here it is!

It would be design with meaning, like the Material Design guideline created by Google. Instead of having to pick a random colour from a colour wheel each time we would have colour palettes to choose from, improving consistency which also improves user experience too. We can create a foundation so we can work off of it in the future, and decide how things transition between desktop/laptops, tablets, and phones. People are using other mobile devices more and more often, and they deserve an experience just as good as every other device. We're an online community so we should be working for the community, right?

This idea really is supposed to make the web accessible to everyone, and we are part of the web. We can improve our navigation from site to site, make the main pages of each wiki more user friendly and responsive (and our wiki templates too), translate articles, and more! I think if this idea could turn into a reality, we could have a happier community with better UX and also gain traffic too :)

(I'll try to get more elaborate in other comments too about how it could work)

[MtMNC]

Sounds like a good idea to me. It could influence future Refreshed development as well.

[georgebarnick]

Definitely @MtMNC

[chriscook18]

Nice idea. Would be interested to hear more.

On 23 November 2015 at 20:19, George Barnick notifications@github.com wrote:

Definitely @MtMNC https://github.com/MtMNC

— Reply to this email directly or view it on GitHub https://github.com/Brickimedia/brickimedia/issues/419#issuecomment-159052295 .

[neoncitylights]

Hey guys, I'm glad to hear that you guys agree :) I've been working on drafts and studying design correlation with user experience and hope to be able to present you guys these rough drafts up soon! From there we can improve what we have and delete, add and just change stuff in general to make the users of our community happy and improve our site :D

[MtMNC]

Saw the WIP in the chat log, it's looking good so far!

An idea that I figure might belong here: what if we changed the content's background color from white to a light gray like on Ideas Wiki? I was thinking #f7f7f7, #f1f1f1, or #eee at the absolute darkest. It just makes the background a bit less harsh.

[georgebarnick]

Looking great @codyn329. Only critique so far is the checkboxes' animation of fading in/out is a bit odd. A "checking" animation would be better suited. More code probably, but more natural feeling. Perhaps similar to something on http://codepen.io/timseverien/pen/Fkfhi is what I'm thinking. The text field is also the only element with rounded corners (besides of course radio buttons which are naturally circular); I'd say to square it off to match the buttons and other elements.

Definitely liking what you've got so far, though. Most certainly want to see it implemented into Brickipedia's templates. Be sure to keep mobile in mind while designing things like buttons and whatnot. You're doing fine so far, but just don't forget to make things easy to select, press, and navigate when on mobile devices.

@MtMNC: I like your thinking, but those ideas do seem a bit too dark when I tried them out on Brickipedia (leaving the rest of the skin as-is). I continued to try your idea with lighter shades, and #fcfcfc is probably the best I came up with. Not a whole lot different than the plain white though, but not as unusual as a medium grey feels to me.

[neoncitylights]

@Both: Thanks for the feedback! I agree with the animation tidbit, I'll work on creating a new one. Textfield is now squared, and of course other devices are being kept in mind :) Working on to improve that mobile experience, as that's one of the main points of this guideline :+1: I'm also working on producing a full-on colour palette on the side, so we can see how it goes from there

[georgebarnick]

I usually get ideas from the conveniently LEGO-oriented color palette we have at http://en.brickimedia.org/wiki/Colour_palette so don't hesitate to take some colors from there.

[neoncitylights]

Oh yep, forgot that existed, thanks! :P Edit: Forgot to mention, I'm not sure when this will be finished since after the end of this week it'll be the end of my break and then school happens again, so during this weekend I'll migrate the content from CodePen.io to Github on a repository for welcoming collaboration

[neoncitylights]

@MtMNC @georgebarnick OK guys, since there's a good chance I won't be too active after this week, I migrated the code to codyn329/brickimedia-design-guide, so all work will continue from there. I gave both of you collaborator rights in case you guys want to improve onto it. However, I'll leave it on Codepen.io as a live demo for testing too :) Here's the link! http://codepen.io/codyn329/pen/NGmJWd

[neoncitylights]

This issue dealt with creating design guidelines and now we have a very rough draft at brickimedia/design-guide, so I'll close this. Any further discussion about improving our design guideline will be put into another ticket soon