.. ==================================================
.. FOR YOUR INFORMATION
.. --------------------------------------------------
.. -*- coding: utf-8 -*- with BOM.

.. _design:


Design basics
=============

The higher education package template is a sample template.
According to current trends in web design the higher education package uses a modern
and reliable target group oriented design.
The primary target group are the prospective students.


Structure
---------
As in modern web design, the higher education package separates the CSS code which is
responsible for the layout of a website from the content.
Therefore the customizations in the .css automatically apply to the whole website.

The design for the higher education package has a modular structure and is easily customizable.

Fonts and colors are clearly defined.
Two colors are predefined (primary, secondary) and can be customized.

These colors can also be used separately in other subtemplates or areas.

The primary-color is used for headlines, text and button. The secondary-color is used as
an additional color in headlines or special items.

.. note::
    *Planned additonal colors:*
    The spot-color serves as an effect- and signal-color to set a focus.
    This could be "icons" in connection with a hyperlink or an activstatus of a box, for example.
    The highlight-color is used to highlight content areas.

To meet the high standard of accessibility, the colors in the design comply with the WCAG Level AAA.


Fonts
-----
It is common to use "decoration fonts" for headlines which are not suitable for continuous text.
Therefore the higher education package provideds two fonts for inclusion.
For example, we use a serif typeface for headlines and special elements.


Icons
--------
The TYPO3 higher education package uses icons for visual highlighting for links and other special elements.

Icons are in the .svg format because of their good scalability on all frontend devices and
their simple integration into the code.

The TYPO3 higher education package uses icons from Font Awesome under
the Creative Commons Attribution 4.0 International license (https://fontawesome.com/license).


Use your own design
-------------------
The webdesign is separated from the content and the features of the website.

So instead of creating a new design, which has to be programmed for different devices with an effort,
it is much more resource-saving to set up the existing page template and adapt it to your needs.
There are various possibilities: from the simple adaptation of colors and the changing of the logo,
up to the complete change of the design template corresponding to the corporate identity (CI).

There are a various customization options depending on your needs.

1. Minimal customization of the existing template
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
You simply replace the logo and adapt fonts and colors according to your corporate identity within the given structures.
This can be achieved by configuration, no templating is needed.

2. Use your own design template
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
You create an individual design template. Furthermore you can add or replace features by using extensions.