Hamburger Sparkasse 

Role: UI Designer
Timeline: 2015-2017
Tools: Adobe Photoshop, Illustrator, Flash, Axure
Agency: big-picture.com

The “Hamburger Sparkasse” or Haspa is above all the leading bank for private customers and medium-sized business in Hamburg and promotes social commitment in the metropolitan area. The design task is to introduce the basic design principles of their digital presences in a simple and intuitive way, with a new responsoive website and image identity.
.

Responsive Behaviour

Between breakpoints, the user notice minor changes or content scaling in the layout.
 
The applicability of the behaviour is checked for each component. In individual cases, the behaviour deviates from it, if this has advantages for the layout.  

1. The basic scaling behaviour of the different components like Teasers and Modules is discribe on the GIF video.

2. Pictures (photos, graphics) and videos scale proportionally and always take up the same percentage width on the page. The aspect ratio remains the same. Images are not cropped.

3. Headlines, sublines, texts, text links and icons do not scale smoothly.

4. At text level, it may make sense to hide certain parts of the text. This is defined on a case-by-case basis depending on the components of the concept and design.

5. Buttons, text fields and graphic navigation elements do not not scale.

6. Distances between components always take the same
always take up the same percentage values on the page.