WIP Design Unification Project (Web, Game, etc)

smsunarto

Federal Gooey of Investigation
Art
Logistics
#1
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:

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

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

chessandgo

Member
Contributor
Hunter
#4
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

Federal Gooey of Investigation
Art
Logistics
#5
@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

Project Lead and Community Wizard
Contributor
Design
Logistics
SpecOps
#6
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 :D

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

Federal Gooey of Investigation
Art
Logistics
#7
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

Badges badges badges badges mushroom mushroom!
Contributor
Art
World
SpecOps
#8
Uh, I like the website design! Very well done - how long until we get it? :p

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

oniatus

Member
Contributor
Architecture
#9
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 :thumbsup:

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? :gooey::omg:
 

Skaldarnar

Badges badges badges badges mushroom mushroom!
Contributor
Art
World
SpecOps
#11
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

Member
Contributor
Architecture
#12
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:
Code:
'org.terasology' : ('https://oniatus.github.io/javadoc', 'javadoc8')
In the .rst you can then add something like
Code:
 :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

Badges badges badges badges mushroom mushroom!
Contributor
Art
World
SpecOps
#13
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

Project Lead and Community Wizard
Contributor
Design
Logistics
SpecOps
#14
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

Project Lead and Community Wizard
Contributor
Design
Logistics
SpecOps
#15
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)

5345975847616512_1512339500_terasologybackgroundpng.png

PSD available as an attachment in Slack