Open Source e-Learning
  • Login

Breadcrumb Navigation

Icon Wiki

Feature Wiki

Information about planned and released features

Tabs

Design Revision

1 Requirements

Some aspects of the current ILIAS design feel being a little bit outdated. Additionally the use of the nuvola icon set often leads to problems, when new icons are needed. We would like to do a design revision and tackle as many issues as possible.

1.1 Color Scheme

At some point we need to decide on a color scheme for the revised skin.
 
The current icons set proposal uses the following scheme:
Web
RGB
ILIAS
#0f2152
15 33 82
#4C6586
76 101 134
#6EA03C
110 160 60
#FA8228
250 130 40
#21C5D8
33 197 216
#523228
82 50 40
#DCB496
220 180 150

1.2 Typography

1.2.1 Font Stack

ILIAS 4.4
  • font-family: Verdana, Arial, Helvetica, sans-serif;
Option "Helvetica Stack" as suggested here:
  • font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  • The screenshot "Box-less Example (25 Apr 2014)" on the UI: Side Block page uses this font stack
Option VerdanaOption Google Web Fonts
  • Google web fonts are nice but not an option, aren't they? Opinions?
  • Pascal: Google Fonts are mostly bad, really bad fonts (bad qualitity, missing charactes, bad readability...). If we choose one of these, we should be very carefull.
Option Embedding Free Fonts with @font-face
  • CSS3 makes it easy to embed good and free webfonts. This ILIAS website is currently using OpenSans (Regular and SemiBold). The fonts are part of the Customizing CSS directory and embedded in the css files with @font-face. To avoid the bad look of blown up bold fonts, the style font-family: "OpenSansSemiBold"...; is used instead of font-weight: bold;.

1.2.2 Line Height

  • Golden ratio for line-height is considered to be between 1.5em to 1.6em, again see this article

1.3 Icon Set

A fundamental part of a design revision of ILIAS is a new icon set. The entire documentation and discussion of the icon set for 5.0 has been moved to a dedicated page ILIAS Icon Set. Please discuss the design and reception of these icons at this page.
Create a new icon set, preferable a "flat" one. Flat icons are easier to create than icon sets that make use of a number of stylish effects. The symbols used in the icons should not change (if there is no good reason), but their style.
Option "DevConf Proposal"
  • Uses SVG images (see also request for SVG Icons)
  • We received a lot of positive feedback for this propsal, so we think this will be the main direction, however the color scheme is not final, some optimizations are needed and single icons should be discussed.
DevConf Proposal (25 Apr 2014)

1.4 General Design / Mockups

Thanks to the funding by the Universität Münster, a webdesigner of ILIAS service provider CaT Concepts and Training GmbH has created some general design mockups for the Personal Desktop, a course content page and the Info page.
 
These mockups are drafts and can still be discussed and modified. But these mockups are important to create the CSS of an upcoming Bootstrap based user interface. Please feel free to add your comments in the section "Discussion" of this page.
Personal Desktop
Personal Desktop with open main menu
Course content
Info page
Explanations

1.5 UI Components

Revise the visual design of ui components like toolbar, buttons, menu and tabs (maybe more). This could be done my using a ui framework like bootstrap, see the UI Framework page.

1.6 UI Screens

1.7 CSS Modularization

A major problem of the current delos.css file is its missing modularization. Since the introduction of a UI framework has been scheduled for ILIAS 4.5/4.6, we can already start to modularize the css file by using a CSS preprocessor, either LESS or SASS. This would clearly separate the responsibilities of component maintainers for their CSS.
 
Proposal (based on LESS)
  • A delos.less file is used to generate delos.css
  • In a first step we only use the @import feature of less
  • All component specific CSS declarations are put into separate less files and are imported in delos.less
  • File structure would be e.g. "less/Modules/Form/delos.less", "less/Services/Calendar/delos.less", ...
This step could already be done without a full integration of a UI framework. There are currently around 580 CSS classes and #id declarations. More than half of them seem to be easily assignable to components. In the same step, unused declarations should be identified and removed.
 
After these steps the remaining CSS declarations in the main delos.css can be examined.
 
Another useful step would be to introduce preprocessor @variables to represent, e.g. colors. This step can also be done without the integration of a UI framework, but the naming of the UI framework could already be used.

2 Status

  • Scheduled for: Release 5.0 (See Roadmap on this page for details)
  • Funding: Universität Münster, ILIAS eV (currently unclear, if we got enough funding for 4.5)
  • Maintainer: Jean-Luc Braun, All Developers
  • Implementation of the feature is done by Leifos, Databay, Qualitus, CaT, S&R and others
  • Contract settled: Partially
  • Tested by / status: (name, e-mail), (status information set after implementation)

3 Roadmap

Since the advisory council put the UI framework on top priority, the topics icon revision/design revision/ui framework come naturally all in one step now. Since time and budget is limited for ILIAS 4.5, we will do most of theses works in a seperate 4.5 redesign branch first (in parallel the 4.5 developments done in the trunk). If we manage to get acceptable results in the redisgn branch before the first beta, we will merge the changes into the trunk. If not the whole topic may be postponed to 4.6.
 
SVN Branch: http://svn.ilias.de/svn/ilias/branches/iic/4_5_bs
4.5 Redesign Test Installation: http://bootstrap.ilias.de (please do not add reports in Mantis related to this branch)
  • Color Scheme / Typography
    • Color Scheme (March/June 2014)
    • Typography (Aug 2014)
    • Finalization (Fixing Contrasts, Sizes, Margins, ...) (First Version 4.5, Optimization 4.6)
  • Icons
    • Basic Repository Object Icons (March 2014)
    • Advanced Object Icons (Administration, ...) (July 2014)
    • Supporting Icons (Arrows, ...) (Partially by Bootstrap GlyphIcons, needs supporting classes, Aug/Sep 2014)
    • Remove unused Icons (July 2014)
    • "Remaining" Icons (Beta Phase 4.5)
    • Streamlining (Beta Phase 4.5)
  • Design
    • Basic Design Mockups (two designs, three main screens) (August 2014)
    • New Delos Skin based on Mockups (September 2014)
    • Detailed UI Components (Toolbar, Drop-Down, ...) Design (First Version with 4.5, everything should "work and look ok", Optimizations with 4.6)
    • Design of Module/Service specific screens (Forum, Learning Module, ...) (First Version with 4.5, everything should "work and look ok", Optimizations with 4.6)
  • CSS Modularization / Cleanup
    • Modularize CSS / Introducing LESS/SASS (July 2014)
    • Remove unused classes (July 2014)
    • Rename remaining classes respecting naming conventions (Beta Phase 4.5, Optimization with 4.6)
  • Introducing Bootstrap
    • Make a Prototype (July 2014)
    • Migration ILIAS UI Elements to Bootstrap pendants (July 2014 - Beta Phase 4.5)
      • Migrate CSS classes to Bootstrap classes
      • Adopt PHP classes and HTML Templates
    • Fully introduce Bootstrap variables (4.5 First Version, Optimization with 4.6)
    • Module/Service Specific Adoptions
      • Fix UI elements in component templates (in general functionality must work with first beta 4.5, visualisation can be fixed during beta ehase)
        • Buttons, ... (4.5 Beta Phase)
        • Adopt Component specific InputGUI classes (4.5 Beta Phase)
      • Introduce Bootstrap elements where possible (4.5, Optimization 4.6)

4 Additional Information

Contact the following persons if you want to know more about this feature, its implementation or funding:
  • Information about concept: (name, e-mail)
  • Information about funding: (name, e-mail)
  • Information about implementation: (name, e-mail)

5 Discussion

MB 23 Oct 2013: I would like to express my support for this move. Thumbs up!
Please keep in mind, that UI-frameworks like bootstrap implement a distinct "design language", which works best if used as a whole.
In the case of bootstrap, this is a "bauhaus-like" grid pattern which works best if the screens are fully styled according to the rules of this visual language. This is, btw, the reason why imho the new green buttons blend in and get lost within the variety of interaction elements they are located with now.
Please, be daring with this revision! I would love to see a fully modernized ILIAS UI.
JF 11.11.2013: We appreciate the general idea and start to collect examples and mock-ups. The introduction of the UI Framework will be discussed on the corresponding separate feature wiki page. We will then make detailed decisions during the 4.5 development.
FS: We'd prefere foundation (http://foundation.zurb.com) over bootstrap and will try o provide a demo skin using foundation for ILIAS 4.4
FS: A Skin-Prototype cannot be provided due to missing ressources of the university of bern.
Pascal, 26.02.14 "Hire a designer that is available for the project as a maintainer for the icons." I like to add "Hire a designer to design ILIAS from scratch". As I have a designer in my team we can talk about doing that at our institution.
If we talk about Icons here it should be thought about removing them in the administration as they are not usefull at all (a general problem of icons, not of ILIAS). For me, the proposed Icons look better than the nuvola Icons.
Pascal, 30.06.14:
Color Scheme: Looks familiar to me (it's close to ours at PH Zürich). Orange is hard to use as it is very dominant against the other colors.
 
Typography: Skip Helvetica (although she's nice and she's from switzerland :) ) as it is only available on mac systems but not on windows and she is not optimized for screens. Skip arial as well as this is not a good choice for screens. I would pefere verdana instead, as she is optimized for screens. See also: http://www.64notes.com/design/stop-helvetica-arial/
Google Fonts are mostly bad, really bad fonts (bad qualitity, missing charactes, bad readability...). If we choose one of these, we should be very carefull.
Alex 2 July 2014: Pascal, I moved the "get rid of boxes" part of your comment to the UI: Side Block page, since this one contains the example mockup now.
Alex, 19 Aug 2014: My personal opinion as a non-expert in typography. I find Open Sans hard to read for small font sizes because of its "thinness". Not sure if this can be tweaked in any way. I like it for headings.
Pascal, 19. Aug. 2014: @Alex: Same here. I like the look of the font but it offers a bad readability for small font sizes. Playing with letterspacing and wordspacing can help, but verdana is still better to read.
Alex 4 Sep 2014: In general I like the design suggested by the first mockups. We should try out some variants, e.g. with tabs and buttons.
ILIAS_LM 2014-09-04:
just have been on www.ilias.de/test45_bs. love the header and its colours, also the drop-downs on the personal desktop. it's on a very good way. if 4.5 will be ~ like this (optimized)  i don't want an own skin anymore! yey.
it was just a quick glance at it, the tabs seem a bit too "high". the font sizes are still unsteady. and when the tree is visible the content looks tight. (maybe it's because i'm not used to the centered ILIAS with a fixed width.)
but i am looking forward to a final version of the skin.
Alex 8 Sep 2014, @ILIAS_LM: Please note that the test45_bs branch does not reflect the envisaged skin. Users asked for a complete redesign, see the mockups under chapter 1.4 on this page.
JF 15 Sep 2014: We would like to integrate the new design of the BS branch development into the trunk as soon as possible (may be tomorrow).
CK 23 September 2014: I suggest two things
  1. Use a bar to represent the learning progress (See below)
  2. Display the Avatar (profile image) of the user in the header of ILIAS. It could link to the edit-profile page (because that's where avatars get uploaded). That would give the look and feel of ILIAS a more social touch without changing much. It could be disabled via template / skin anytime..
Learning Progress: Display as PROGRESS-BAR
Avatar: Display in ILIAS-Header
HJL 23 October 2014: Design Revision proposals of iLUB
  1. With the new style in ILIAS.de 5.0, it is still more difficult to find the "ShowFilter"-link, see Attachment. Maybe an additional improvement could be to slide the "Hide button"-link to theupper right corner: "Show filter" and "Hide filter" are then nearby.
  2. ILIAS should use modals instead of the actual dialogue.
  3. The "Avatar" (Personal Picture) is already integrated: Is it really necessary? Some of our users will be very astonished. So if ILIAS introduced this, there should be an Option in the System-Administration to activate this new behavior. If deactivated, the old Login-procedure should occur.  If activated, and users have no Personal picture, then the new Glyphicon should replace the old Default icon.
  4. We support the suggestion from Pascal: The Main navigation can`t be on the right.
  5. Shouldn`t we optimize ILIAS for Desktop Computers, too? If we do, Learning-Modules with large pictures, or Datacollection with more than 7 fields could be used on big screens without the L-effect, see Attachment.
  6. It is really difficult to distinguish the different areas in the "Add new Item"-element: Organisation, Communication, ... : Everything is white. The light-grey effect from ILIAS 4.4 should be used, or another visual helper.
  7. We think that the icon when you upload a pic (e.g. png-file, see attachment), needs a revision. Is it a Television? Big screen? And it looks strange when you use it in a course, togehter with other files and object.
Make "Hide Filter" more visible
Use modals instead of the actual dialogue
"Avatar", Glyphicon
L-effect (also occurs on large screens, because the actual responsive design does not support large screens)
Icon revision
Pascal, 24 October: I like the new design a lot. What an improvement! Many of our users, inculding me, will be very happy with this "new" ILIAS .
 
At the moment there is only one thing that should be changed from the usbility point of view: The main navigation can't be on the right. This is unusual for main navigation elements (ok for service navigation like e.g. "edit profile", Search...). See also http://www.nngroup.com/articles/horizontal-attention-leans-left/
Pascal, 27 October: The list of Hansjörg can be extended by many many more design-bugs. It would suggest to have a designer beside the css-developer for one day to correct them.
 
One important thing to me is the font. OpenSans looks nice but it is still worse then verdana. Without a good kowledged about how to make OpenSans more readable it should no be used (I wouldn't use it anyway).
CK 27.10.2014: Suggestion to simplify forms by using so called "split-buttons", i.e. a button with a primary button-action and other actions accessibly via dropdown.
Split-Button Example (Bootstrap)
Possible Use-Case in ILIAS
Administration > User Accounts: The dropdown and the button could be combined into a splitbutton. The same applies to all Table-Actions
Ck 27.10.2014: The visual difference between different learning progress states can be subtle on some screens, or if printed on a black-and-white printer. The reason is, that some of them have the same shape, but only differ in color (not started, in progress and passed). Only failed and completed have additional decoration (cross and check). I suggest to develop unique forms for each learning progress state. It could be a pseudo-progress-bar as suggested above or a partially filled circle (not started: no filling, in progress: 1/3 filling, passed: 100% filling).
HL, 30.10.2014: Matthias asked in the ILIAS blog that we should give additional feedback: "Feedback on the design revision is highly appreciated.". We should not forget to start also a second step for ILIAS 5.1. Timon here: UI - Framework Step 2.
Alex Killing, 4 Nov 2014: @ALL: Please add comments related to specific topics to the corresponding feature wiki pages, e.g. Colin, there is an ongoing discussion on the UI: Button page and its already linke above (and has been since some time).
Alex Killing, 4 Nov 2014: For the main menu position discussion I added some mockups at UI: Header Section. Please add your suggestions and comment there.
JE, 2015-01-16: The implementation with LESS is a huge step, that could makes customizing a lot easier.
 
The LESS functions darken and lighten are used multiple times inside of CSS definitions. Maybe this works fine for the delos theme, but in most cases the lightening and darkening of colors will return completely different colors, that may not fit coparate color scheme. E.g. In our case green becomes cyan. In my opinion these functions should only be used to define color variables, that are easy to change, but never inside of CSS definitions.
 
The functions are used as well, to define gray shades as graduation of @mid-gray (again inside of css definitions). This results in this gray jumble we know from older versions. The predefined gray varaiables from bootstrap should be used here (@gray-base, @gray-darker…). Please limit the Number of shades.
 
At best you only need to redifine color variables for simple customizing. This might be enough for most instalations.
 
Please discuss at next JF. I can do the necessary changes and provide these as a patch durign next week, if you like it.
JF 19 Jan 2014: Please send your patch to our CSS maintainer Jean-Luc (braun@qualitus.de). He will check it and apply it, if it works ok.
FS studer + raimann ag: Using inline svg-Icons would allow to style them via css: http://css-tricks.com/using-svg/ . this need classes and/or id for elements of the svg. if using a good concept of classes, the icon-colors could be definied by the bootstrap-less-variables.

6 Implementation

...

Last edited: 24. Apr 2018, 18:14, Tödt, Alexandra [atoedt]


Search (Block)

Related Component/Module

Release Status

Development Status
Published in trunk

Funded by

Testcases
-

Approval by Customer
-

Wiki Functions (Block)

Info

Recent Changes