WIP Design Unification Project (Web, Game, etc)

Discussion in 'Art & Media' started by smsunarto, Jan 4, 2017.

  1. smsunarto

    smsunarto Federal Gooey of Investigation

    Design Unification Project

    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:


    I'll be posting progress in this thread, any form of suggestions is greatly appreciated.
    • Like Like x 2
    • Friendly Friendly x 1
    Last edited: Jan 4, 2017
  2. smsunarto

    smsunarto Federal Gooey of Investigation

    Module Listing


    [X] Basic website structure
    [ ] Module page template
    • Winner Winner x 3
  3. smsunarto

    smsunarto Federal Gooey of Investigation

    Wiki/README Divider

    [​IMG] [​IMG] [​IMG]

    PSD Uploaded to repository.
    • Winner Winner x 2
    • Like Like x 1
    Last edited: Jan 4, 2017
  4. chessandgo

    chessandgo Member

    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)
  5. smsunarto

    smsunarto Federal Gooey of Investigation

    @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.
  6. Cervator

    Cervator Project Lead and Community Wizard Staff Member

    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 :)
  7. smsunarto

    smsunarto Federal Gooey of Investigation

    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.

    [​IMG] [​IMG] [​IMG] [​IMG]
    • Winner Winner x 4
  8. Skaldarnar

    Skaldarnar Badges badges badges badges mushroom mushroom! Staff Member

    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.
    • Agree Agree x 1
  9. oniatus

    oniatus Member

    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:
    • Winner Winner x 3
    • Like Like x 1
  10. smsunarto

    smsunarto Federal Gooey of Investigation

    Thanks @oniatus! Great work there, I'll try do some research on how we can work on applying our own docs style
    • Like Like x 1
  11. Skaldarnar

    Skaldarnar Badges badges badges badges mushroom mushroom! Staff Member

    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?
  12. oniatus

    oniatus Member

    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 ;)).
    • Like Like x 1
  13. Skaldarnar

    Skaldarnar Badges badges badges badges mushroom mushroom! Staff Member

    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(?)
  14. Cervator

    Cervator Project Lead and Community Wizard Staff Member

    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.

Share This Page