WIP Design Unification Project (Web, Game, etc)

[smsunarto]

Design Unification Project
​

Goal:
Create a design overhaul for all Terasology related application and site. To achieve this, I utilize Google's material design concept that provides clean looking style & multi-device support.

To Do List:

• Forum (Xenforo): http://forum.terasology.org
• Splash site (GitHub Page): http://terasology.org - could the large screenshots be used for a background, maybe with nice header/footer added? Less ajax, cleaner overall site, and easier addition of videos)
• Jenkins: http://jenkins.terasology.org
• Artifactory: http://artifactory.terasology.org
• Weblate: http://translate.terasology.org
• Meta server (minimal server and module listing site): http://meta.terasology.org
• Launcher itself
• Future larger module tracking site (GitHub page again)
• Assorted wikis, like https://github.com/MovingBlocks/TerasologyLauncher/wiki
• Future documentation site of some sort
• GitHub readmes
• Future mobile app of some sort (server management utility?)

Repository:
https://github.com/smsunarto/TerasologyDesign

I'll be posting progress in this thread, any form of suggestions is greatly appreciated.

 

[smsunarto]

Module Listing

Progress:
[X] Basic website structure
[ ] Module page template

 

[smsunarto]

Wiki/README Divider

PSD Uploaded to repository.

 

[chessandgo]

I was chatting with Cervator, there currently is a problem with bundling fonts causing the download to be too large, to combate that I proposed we convert all button text to vector graphics, and to help ease the burden of all the buttons, convert some of them into more universal glyphs. (better interface as well)

Here as just some rough drafts of what the settings button on the game main menu screen could be changed to, and put in a corner.

(im more of a fan of the cut out/negative space, or the stand alone without the circle, but Cervator though has a non frosted icon in the middle would be best)

 

[smsunarto]

@chessandgo that's possible. I'll adjust the menu mockup to accomodate this changes. Material design have it's own icon pack which to many is really good and pretty large. We can edit the icon to accomodate the style that we want.

 

[Cervator]

Bit of a belated response but as I noted on an issue the drawback by replacing buttons with icons is that icons tend to have tooltips ... which then still need to be translated

And yeah any time we can use an existing icon that has already been styled to fit with a pack - great!

@smsunarto thanks again for picking up on this

 

[smsunarto]

Sorry the progress is really stagnant, I got really caught up with school works (I need more holiday)

Website Progress:
- Integrated Jekyll for easy insertion of image, navbars, imports, etc.
- Index Page
- 404
- About (With pop-up pictures!)

Is there anyone that is interested in handling the UI concepts for the unification? (Grids, layout, positioning) because it will greatly improve my productivity to create a mock-up with the new design guideline.

 

[Skaldarnar]

Uh, I like the website design! Very well done - how long until we get it?

What about using font awesome or something similar for icons? I think it is really lighweight and scalabale.

 

[oniatus]

Going to hijack a bit of this thread

I started a rework of the entire documentation to give a new contributor/modder an easier entry to the project (still WIP).

Preview of the rendered html is available at https://oniatus.github.io.

The sources are located at https://github.com/oniatus/TerasologyDocs.

There is also a snapshot of the engine javadoc next to the pages, which can be used in the docs to generate direct links to classes/fields/methods with their internal documentation.

Also thx to @GabrielXia and @Cervator for early feedback

In short:

• Docs are based on sphinx-doc, which was initially designed for python but can be extended for java.
• Sources are little python for config and restructuredtext for the docs. Sphinx is theoretically able to support markdown but i decided to go entirely for .rst because it is more extensible and has a well-defined syntax. Drawback is, that I am moving all wiki markdown by hand, which is not as bad as it seems because I use the same iteration to review and sort the pages.
  
• If we are going to use it for official docs, we could integrate the sphinx build in jenkins, same for the javadoc build
• Also extra feature for this representation: We have full version control on github, including the option to review and test pull requests locally (starting a preview server on localhost is a 1-liner).
• Page size is ~50MB of the project javadoc and ~5mb for the parsed .rst files

What do you guys think about adding a documentation like this in the frontpage?
Maybe we can even change the docs style to a custom terasology one?

 

[smsunarto]

Thanks @oniatus! Great work there, I'll try do some research on how we can work on applying our own docs style

 

[Skaldarnar]

I like the idea of unifying (and improving) our wiki and documentation! One downside I see is that it would require us to learn another technology for writing the documentation/wiki. I'm quite familiar with markdown and it feels natural to write a brief README, setup page, or whatever. How big would the border be to only use sphinx?
And another question: is it possible to integrate source code listings from the repository to the doc, or, the other way around, include (specific) source code documentation in the wiki?

 

[oniatus]

The syntax is pretty easy, you can test the "Edit on GitHub" link on top of the pages to get to the sources for a direct comparison.

Code snippets are supported with inline snippets, similar to markdown, as in this section: https://oniatus.github.io/developing/entitySystem/eventsSystems.html#processing-events
There is also support to include snippets from files out of the docs repository, which I did not use yet: http://www.sphinx-doc.org/en/stable/markup/code.html#directive-literalinclude

The JavaDoc links work by replacing text in the configuration, where a package is registered to an url:

'org.terasology' : ('https://oniatus.github.io/javadoc', 'javadoc8')

In the .rst you can then add something like

 :java:ref:`Event <org.terasology.entitySystem.event.Event>`

which will be parsed to "Event" with the link https://oniatus.github.io/javadoc/org/terasology/entitySystem/event/Event.html.

I found no plugin to include raw code from github, but it some plugins access the github api for the build: http://sphinxcontrib-github.readthedocs.io/en/latest/. So theoretically it would be possible to add an own extension, e.g. to include raw code snippets from our repository (beyond my python skills ).

 

[Skaldarnar]

The easy linking of Javadoc looks great, that's exactly what I meant. Whenever something changes in the Javadoc this will be reflected in the wiki documentation (or rather, you'll always get to the latest Javadoc from the wiki).
I'm trying to get used to the syntax a bit more, to me it looks quite different from Markdown. What I dislike in particular is the fact that you must use indentation for code blocks, notes, etc. AFAIK the GitHub online editor is not working well with tabs(?)

 

[Cervator]

I posted this on Slack already but thought I'd link it here just as an example of what I consider beautiful design / great use of a color palette: https://gradle.com/enterprise

Those graphics are gorgeous, especially on the dark green background, but even standalone as well.

 

[Cervator]

Here is a submission from this year's GCI for a Facebook optimized banner by Mateusz Tramp (partly based on additional assets produced by Nelson Gomez - new school Gooey)



PSD available as an attachment in Slack