Show Advanced KnowledgeHide Advanced Knowledge

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 Verdana

• See this article

Option 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 New ILIAS Iconset 'Milos'. 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.

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.

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.

• UI: Button
• UI: Data Table
• UI: Drop Downs
• UI: Explorer
• UI: Filter
• UI: Form
• UI: Footer
• UI: General Screen Layout
• UI: Header Section
• UI: Locator
• UI: Object List in Container
• UI: Side Bar
• UI: Side Block
• UI: Tabs
• UI: Toolbar

1.6 UI Screens

• UI Screen: Calendar
• UI Screen: Course Content
• UI Screen: Exercise
• UI Screen: Forum Thread
• UI Screen: ILIAS Learning Module
• UI Screen: Login
• UI Screen: Mail
• UI Screen: Mediacast
• UI Screen: Personal Desktop - Overview
• UI Screen: Personal Desktop - News
• UI Screen: Portfolio
• UI Screen: Search
• UI Screen: Test - Question
• UI Screen: Test - Results
• Responsive User Profile

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-Verein (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).

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.

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 sr.solutions: 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

...