New public website for a purchasing company in the Swiss health sector.

tarifsuisse

tarifsuisse is a sister company of santésuisse, the largest inter-trade organization of Swiss health insurance companies.

Tarifsuisse provides services for health insurers. The main services are:
* Negotiating to exploit synergies and purchasing power (cost savings).
* Gain first-hand information (participation in negotiations).
* Actively involvement in changes in the Swiss health care system. Counteract cost increases.
* Implementation of major projects such as the new care financing and the new hospital funding.
* Conclusion of contracts. Make standard contracts available on which the insurers can negotiate individual contracts if necessary.

The tarifsuisse website delivers information about the company (organization, team, customers, jobs, addresses, annual reports) and about the services (purchasing and management). Furthermore tarifsuisse publishes communiques (press releases) on the website.

The websites target audience are experts (health insurers, doctors, hospitals), politicians, people working in the media (journalists) and employees of tarifsuisse and santésuisse.

German: tarifsuisse ag French: tarifsuisse sa (tarifsuisse.ch)

http://www.tarifsuisse.ch (redirects to http://www.santesuisse.ch/de/tarifsuisse.html)

GENERAL

* Unspectacular, easy, clear and clearly arranged, as less layout elements as possible. Better avoid fancy divider lines, shadowed separators etc. Reduced to the max.
* Layout type: flat or near flat design
* Technically it must be a fully responsive solution, based on Bootstrap v3.x, layouted as a 12 column grid layout.
* We clearly prefer wide layouts over boxed layouts
* For the responsive layouts we want to have different widths used with different break points. The largest minimum width (for e.g. people with full HD screens) should at least use full available width on a 1’280px wide screen.

COLORS

The following colors are used in the official style guide and should be used (especially for the Logo), but the rest of the design also can be enhanced with other colors. Be cautious with colors. The design should appear decent and reputable.
* Black; RGB: 003, 005, 010; RAL 9005
* Blue; RGB: 023, 097, 171; RAL 5015
* Gray; RGB: 186, 189, 186; RAL 7038
* White: RGB: 255, 255, 255; RAL 9003

LOGO

Three versions can be used. Take the one which you prefer for your design:
1. Exactly like it is implemented for the current website: http://www.santesuisse.ch/de/tarifsuisse.html
2. Pure text logo without image and borders, just „tarifsuisse ag“: https://www.dropbox.com/s/habx24yox…y.png?dl=0
3. The same combination of image and text like it is implemented for the new santésuisse design: https://www.dropbox.com/s/n4cutpilh…e.png?dl=0
The Font in the logo is Frutiger Black, LW 141
Logo text can be blue or black. Choose what you prefer.
Adobe Illustrator Files
French Logo, black text color: https://www.dropbox.com/s/we2wma360…rz.ai?dl=0
German Logo, blue text color: https://www.dropbox.com/s/d18xzkd59…et.ai?dl=0

FONTS

Till today Arial has been used for tarifsuisse (and for santésuisse). But since we all know that Arial looks old and ugly on the web and you won’t have any chance to create a nice looking typography, try to work with Frutiger since this is the official font for all publications.
But when you come to the conclusion that Frutiger is not optimal for your design, choose a different font. We do like fonts like “Open Sans”, “Proxima Nova”, “Gesta”, “Lato”, and others, so feel free to choose wisely, since we think that the typography is very important. In general we think, that you should not mix different fonts, but if you have great ideas to include some header fonts that not only have a different font-weight, but also are a different font itself, that’s okay, as long as it supports your layout and the font is e.g. a nice divider element to structure the content.

IMAGES

There is no need to implement mood or slider images. The website is for experts. Must be focused on the content.

ICONS

We want you to work with icons. We all know, that icons do only make sense, as long as they are self-explanatory, but this will be our subject later on. Just use icons, independent of how well explanatory they are, but choose again wisely, since we don’t want to find any common, old XP-like icons, but new and fresh ones, e.g. from http://getbootstrap.com/components/#glyphicons or from http://fortawesome.github.io/Font-Awesome/

3 pages: Homepage, Overview Page, Detailview

ELEMENTS FOR ALL PAGES

HEADER

The following elements have to be placed in the header area of the page.
* Service navigation with the following elements (links):
** language selector (de or DE for German / fr or FR for French)
** anmelden (log in / log out)
* Main navigation (read more about the navigation concept below):
** Über tarifsuisse
** Leistungseinkauf
** Leistungsmanagement
** Kommunikation & Public Affairs
* Logo (read more about logo versions above)
* Search input field

FOOTER

You can arrange the elements the way you think it is the best. You can also add elements, from which you think they have to be added. In minimum this content must be placed in the footer area:
* Address information & map
* Link to the contact form
* Quick sign up form for the newsletter.
* Either some guideline texts or some deep links from the navigation tree.
* Do not add Social sharing buttons. They are undesirable.

PAGE 1 - HOMEPAGE

The homepage should give a quick overview over the main content areas and it should teaser newest information.
The following content elements must be visible:
* Visualize the main navigation areas
* Implement a teaser element for the newest information: Each entry should display the date, title and read-more-link.

PAGE 2 - OVERVIEW PAGE

An overview page should give a quick overview over a specific area, e.g. „Über tarifsuisse“.
So the following must be visible:
* Main title of this area, e.g. Über tarifsuisse
* A short text.
* Visualize the entries of the second navigation level.

PAGE 3 - DETAILVIEW

Detail views display longer texts, images/graphs, contact persons, etc.
The following must be visible in your design:
* Main title of this page
* Short lead text
* Standard content text
* Contact person with contact data and portrait image
* Text types and formats which must be visible:
** titles from h1 to h6
** link format
** bold
** tables
** bullet list and numbered list
** small form with input fields, dropdown, multiselect, textarea, radio, checkbox and buttons

NAVIGATION CONCEPT

You are free to suggest a navigation concept. But please note the following general conditions:
* Navigation structure: https://www.dropbox.com/s/ebl8vwii2…9.png?dl=0
* No mega dropdown.
* Every click opens a new page.
* Tiles navigation is an option but is not mandatory. See the mockups just for inspiration:
** Mockup homepage: https://www.dropbox.com/s/o6croocnd…e.png?dl=0
** Mockup second level: https://www.dropbox.com/s/oq38zkpur…l.png?dl=0

AVOID THIS

* We do not like animations.
* Don’t use and mix too many colors. Stick with our colors and enhance when needed only softly with perhaps 1 highlight color. Don’t define colorful main navigation entries, since we don’t wanna have a page that looks like Lego.
* Don’t use (too) small fonts. Try to use modern, big and easy to read fonts.
* Don’t make the main content area too small.
* Don’t choose a boxed layout as mentioned above.
* Don’t mix too many fonts, also as mentioned above.
* Since it should be a flat design, don’t use 3D effects. And use gradients only, if absolutely necessary, since it really makes the page looking even better.
* Don’t add social sharing icons or buttons.