Design

Fonts

The font used throughout the design is called Source Sans Pro. It’s the first open source font designed by Adobe. It was published under the SIL Open Font License. The source files can be downloaded via Sourceforge and Github. (Source: Wikipedia)

The font can also be embedded with Google Fonts.

At the beginning, the Roboto font by Google was considered as an alternative. Both fonts – Source Sans Pro and Roboto – have very complete families, from very light to bold font styles.

We went for the Source Sans Pro because of her more distinctive character while being extremly readable. This font choice gives the website a modern look.

We use the font weights Regular and Bold. For emphasizing text, the italics provided with the font can be used. Please take care of using the real italics, not only slanting the regular font with <em>.

Colors

The design comes with a colorscheme that is both colorful and soft. We often have long pages with a lot of text and tables, so the colors needed to work for structuring the site. It should look friendly, not too technical – we want to attract users with all kind of backgrounds, and therefore need the site to look human/welcoming. And last but not least, the colors needed to display the variety of the austrian parties.

The main color (used in the navigation bar throughout the site) is blue. It is also used for the background of the homepage in a slighly lighter hue.

An overview on the colors used on the site (in RGB, the percentages refer to the original color):

  • Text color black 0/0/0
  • Linkcolor blue 0/111/213
  • Linkcolor blue hover im Header and Footer (50%) 127/183/234
  • Blue Header Background 30/69/99
  • Grey Footer (85%) 38/38/38
  • Light Red 245/95/87
  • Red 236/55/51
  • Red 50% for icons in the search bar 245/155/153
  • Grey 50% for icons in the search bar, grey text, etc. 127/127/127
  • Grey text footer (25%) 191/191/191
  • Blue background homepage (95%) 41/78/107
  • Grey search bar (10%) 229/229/229
  • Grey text entry field in search bar (18%) 209/209/209
  • Blue background lightbox 30/69/99 with opacity 0.9
  • Grey lines in tables (15%) 217/217/217

Parties: - ÖVP 65/60/77 - Grüne = green 63/146/91 - SPÖ = red 236/55/51 - FPÖ 94/148/186 - Neos = pink 215/76/107 - Stronach = yellow 243/188/64 - BZÖ = orange 243/120/62

Other: - Green box element (Top10, etc.)

fill color (10%) 235/244/238 border color (25%) 207/228/214

  • Light red box element (subscription form) fill color (5%) 254/247/246 border color (20%) 253/223/221

  • Blue box element (laws) border color and fill color lower part (15%) 221/227/232 fill color upper part (5%) 244/246/247

  • Buttons

    border color light red 245/95/87 and fill color 255/255/255 (text and icon in light red) hover: border and fill color 245/95/87 (text and icon changes to white)

Grid

Text

We have a number of basic text formatting covered, such as headlines, lists, etc …

Tables

Tables always start with a white header row and bold text. All the other rows are alternating a a white and light grey background (5% of blue 30/69/99). The rows are separated by light grey horizontal lines. There are no vertical lines or other elements to reinforce the columns. This way, the tables look simple, yet organised.

Text in tables is smaller than normal paragraph text. Icons can be used as needed. There is a generous padding in the table fields.

Icons

offenesparlament.at is a very text and table-heavy site. While more visualisations are part of our wishlist and might be realized in a next step, we needed smaller visual elements to help our readers and make the content easier to understand. That is where colors and, just as important, icons come in.

We used symbols that are based on the Streamline Icon Set (Line Version). To fit our needs, some icons were edited or created from scratch and added, such as the parliament icon.