The Urban Design Master study programme at the HCU Hamburg unites theoretical and practical disciplines relating to the city of the present and the city of the future. The focus is on interdisciplinary research and design.
In order to incorporate the influence of given facts into the contentual design of the site, the start page has a “social wall” that mixes page content with (tagged) content from social media. In itself, this area of the site demonstrates the challenge that had to be fulfilled by the site’s graphic design: the idea is to give very heterogeneous image and text material a consumable, recognisable form, without imposing uniformity. In order to ensure this, the menu was given the most striking design of any element on the site. Each navigation point is a surface, whilst “home” and “search” are static elements, enabling quick navigation regardless of the configuration of the site. At the starting point, the sub-navigation is composed of two points – “About” and “Projects” – to which more areas and navigation options are added as one moves more deeply into the site. In addition to using the main menu and the search function, various cross-references and links within the file are provided to allow for non-linear navigation and for grouping under overarching header themes.
The static – not to say brutal – page structure is relieved by an animation for the menu points, lending the tabular ascetic a certain playfulness. The typographic concept is derived from a kind of default design. Conventional defaults (somewhat optimised) were adopted, with only the scale changed to make them different.
In order to avoid a colour branding and to keep all options open relating to working with the CI of the HCU, and also the design of products beyond the website, the colour scheme of the website is left to the user.

This page was created in collaboration with Maximilian Kiepe and Hanna Osen.

Hallo is a platform for the contemporary Internet that focuses on the fluid boundaries between technology, interaction, and aesthetics in the digital world.
Each website is a self-contained space; functioning in direct visual comparison with other spaces is not part of its concept. Its function may be anything from interactive installations to shopping systems. This makes it all the more different to find an exhibition space that allows one to do justice to all of these different functions, forms of interaction, and visual qualities.
This website is intended as an experiment in making content available on the Internet in a playful way. This is shown by the emojis used as navigation elements – which could be called the “Esperanto” of the Internet – and by the fact that it is possible to load the pages and to interact with them on any device without leaving the platform.
The “Cura­tion Weekend”, which allows maximum insight into the almost unlimited diversity of the Internet, has been an integral part of the concept since its launch. This format gives designers, programmers and artists the opportunity to share relevant or interesting websites with the community.

This project is practically the stereotype of a designer’s portfolio. The content is constituted by the originator and his oeuvre. In this case, the name of the studio reflects the two key components that are intended to be conveyed whilst representing the foundation of the site’s interactive character.
Reducing navigation to two areas – “who” and “what”– allows for radical simplification whilst also allowing scope for playful treatment of the content. The division system for the screen leads to a blending of content from the two areas, owing to the thematic breaking up of the two halves that occurs during interaction.
When stationary, the visual configuration of the site is characterised by a strong typographic profile combined with graphics of reproduction photographs. When one interacts with the site, the regularity of its layout is disrupted by transitions that appear erratic and by unexpected modifications to the interaction design.

The works of designer and professor of graphic design Ingo Offermanns combine tradition and modernity, convention and experiment. This makes it all the more difficult to find a digital form of presentation that does full justice to all this diversity and all the facets and possible interpretations of the content.
There is always a tension in focusing on content or object. At the beginning, working with their representation always poses a question about the possibilities for conveying the content contained in the artworks.
In Offermanns’ words, graphic design is “[…] a discipline of mastering the world, of translation, of construction, of representation, of memory and of multiplication.”¹
In this case, the efforts to accurately represent the dimensions of graphic design described by Offermanns are expressed by reflecting the spirit, the diversity, and the feeling of his artworks in visual extract form.
The typographic animation of the start page represents a visual interpretation of the contrasts that emerge. It transfers traditional artworks into the here and now, but also functions as a “break” element, dividing the page design from the works on display.
Beyond this, the site restricts itself to clear and minimalist interaction design and graphic design. In images and texts alike, the focus is on the content, in every case. Individual projects are shown along the z-axis, meta-information on the y-axis, and navigation between the projects on the x-axis. This permits a varied journey for the user, in spite of maximal reduction.

Roman Gysin’s web presence is not exactly intended as a portfolio. Instead, the idea is to put opportunity, inspiration, the working process, and the result on an equal footing, and to enable the viewer to combine the elements to form their own mental pattern.
An exhibition of Gysin’s work prompted the Zürich gallery of Herrmann & Germann Contemporary to write that: “[...] coincidence and intention, gesture and action play a critical role in the presentation of the individual artworks in confrontation.”¹ The interactive concept for the digital exhibition space is similar. A user who interacts with the content may also inadvertently become a designer: if the mouse cursor enters a specific area of the site, it activates a mechanism that manipulates the website’s colour and image world, giving the artwork a new context.
When one looks more closely, the seemingly chance images at the upper left-hand edge of the page and the resulting white spaces instantly do away with the other conventional digital interpretation of an art catalogue, with pictures listed in an index with an accompanying description.

“Appointment calendar”, “portfolio” and “study and learning information” are the main headings on the Klasse Grafik web presence. Such a large quantity of heterogeneous content requires a clear graphic design, and an even clearer interaction design.
As the curtain falls on the start page, an almost bombastic line of text makes way for a very clear and tidy, almost tabular layout. The categorising of content into two overarching rubrics (students/study) is enabled by a split screen. At the same time, these provide the stage for all picture content of the site. This form of separation enables a playful investigation of the content, juxtaposed with maximal clarity and structuring.
In spite of the site being strongly oriented toward content, the students and their pieces of work are in the foreground: firstly, through the visual placement of image material which appears exclusively in this context (portfo­lio/blog), and secondly through a “break” in the design to mark the “students” area.

This page was created in collaboration with Jana Reddemann, Max Prediger, and Roman Fischer.

Narrative is the keystone of Gottwald’s artwork, both in his individual images functioning as illustrations and in the sequences of his comics (published by Bachwald).
The start page of his web presence draws on the dimension of time – absent from books and drawings – by using movement to make the person interacting with the content an active part of the story, and, ultimately, to draw that person into the cosmos of the content.
In the pages that follow, a clear, linear layout combined with playful typography provides a framework in which Gottwald’s wittily related and sometimes rather absurd scenarios can unfold and reveal a life of their own.

Narratives from her own world provide a common thread that runs through the artworks of Sophie Schweighart. Her photographs focus on surreal motifs, and on performative representations that breathe artistic life into non-existent choreographed scenes.
The structure of the website allows Schweighart’s artworks, whose dramaturgy gives them an almost filmic quality, to be shown in the context of her overall oeuvre (a selection). The dimension of the individual artworks becomes visible only through interaction and the appearance of meta-information.
The zoom function, which can be applied to the whole site, and places individual images in focus, enables the viewer to reveal details that enhance their superficial impressions. When the page is in zoom mode, it is possible to navigate between the artworks without cancelling zoom mode.
Passive interaction – viewing – also influences the presentation. If it is left undisturbed for a number of seconds, the page goes dark, framing Schweighart’s artworks in black.

Photography plays a role in every medium, but not every kind of photography is intended for– or even suitable for – every medium. For instance, a digital photographic portfolio may, in optimal conditions, be able to represent the character of the individual series, but it can never capture the totality of several photographic series intended for an exhibition context.
Greiner’s artistic work extends to both graphics and architecture, and repeatedly addresses the theme of an artistic world that is created and manipulated by human beings. The quality of alienation in what is actually shown is reflected in the typographical handling of the titles. Individual pictures and series alike cannot be disassociated from their context. The white space around the artworks is broken up by the typography, leaving the viewer with only the overall picture.
In order to undertake a separation and hierarchisation of the content, it was divided into three levels. At the entry level, the artworks appear in the form of a linear path through an exhibition setting. All additional information, plus access to a password-protected area containing Greiner’s commercial work, is located on the second level.
A number of tests, however, showed that if interaction was to be reduced to two of the most conventional elements (click and scroll), then an introduction would be required. In this case, this is done by means of “operating instructions” that follow the cursor, located directly in the individual areas.

In the case of the record label The Press Group’s interim site, a small number of effects that aim to physically imitate a resonating body are used to produce a kind of interactive, digital glockenspiel.
This interpretation of sound in digital space provides the arc for the content on this site, which showcases the experimental activities of the artists represented by the record label.

In his artworks, the artist Julian Charrière moves between present and past, allowing viewers to see themselves as part of a transient, endangered world in a state of constant upheaval.
“Charrière is a neo-romantic nature adventurer who draws attention to the melting of the poles by burning holes in the ice in certain locations. In his installation We Are All Astronauts, he ground down globes, in order to show that the world is destroying itself.”¹
The white cube-like digital exhibition space is based on a classical art catalogue and constitutes a graphical framework that provides sufficient space for the unfolding of the sometimes fragile-looking artworks. The functioning of the navigation is revealed on the landing page, whilst an index is provided by the numerical listing of the projects. – As one interacts, this moves to the side, and, in minimised form, allows for quick navigation.
The reproductions of Charrièr’s individual artworks and series illuminate them from different perspectives, documenting the process and the exhibition context. Each individual view is placed in the context of the whole through the presence of the preceding and following image, but can also be viewed as an individual image thanks to the visual unobtrusiveness of the neighbouring pictures.

In terms of presentation and in her works, Hannah Dunkelberg interests herself in the abstract tracing of the space onto objects positioned there. This approach constantly produces new combinations through overlappings. An artwork that is, in itself, static interacts with its environment, and can therefore be seen and read in a new way in every location.
The blog-like portfolio is an attempt to apply this sense of ease to digital space. Transparency and layering are incorporated by overlaying a randomly chosen shape, multiplied to cover the whole surface, onto the content, thereby generating a new overall composition. When one scrolls down, the navigation – the only visually static element on the page – vanishes.
The option of deploying time in the form of sound and movement as a design element in digital space provides the basic conditions for the production of interaction concepts whose potential relates to material objects.

The digital exhibition space for the artist David Schiesser responds to the user’s media consumption habits. In an age of seemingly unlimited product ranges and attainability, non-availability is barely a factor anymore. One negative aspect of this is the resulting lack of awareness of the value of content. Visual impressions become a consumer commodity, and everything we see becomes simply a passing buzz in a world overloaded with stimuli.
The site concept includes frequent changes of the entire content; this means that content is available for a limited time only, and also leads to a restricted quantity of image material. Each displayed sequence of images will be removed at a non-specified future date. To remind viewers of this transient quality, the date of the change being made is displayed on the site.
This frequent and radical changing of the content enables Schiesser to curate his site without restrictions, thereby covering a wide spectrum – including a temporary exhibition, but also banal or even comical content – and mixing these areas together.

As the name suggests, the photography exhibition “Von Zehn, junge Positionen zur Wirklichkeit” (lit. “From ten, new positions on reality”) gives ten Hamburg photographers the chance to share their own personal view of the world with visitors. The spectrum ranges from black-and-white analogue photography to documentary photography work to digital snapshots.
Unlike printed formats, a digital representation offers the option of playing with the filling of surfaces in a static and non-static way. In the case of this exhibition, this provided the opportunity to create a hierarchical balance in the visual representation of the individual photographers and their artworks. When the page loads, a random generator positions the exhibition’s title within the viewport, so that each viewer sees it in intersection with a different picture. The page is divided into ten function buttons, each of which reveals to view a new artwork and its author.

In urban planning, new ways of working are being considered, in response to changed requirements. The symposium “Disziplinäre Grenzgänge” (“Disciplinary Boundary Crossing”) looks intensively at the wish for a closer interconnection of theory and praxis. In connection with the programme of events, a number of modules take place in which experts from different professions come together to discuss topical themes in urban planning and development, with the proceedings documented and evaluated during and following the symposium.
The website’s construction is modelled on a conventional one-pager. Its interaction and navigation models, however, break with all expectations. The graphic and interaction design references the subject matter: the desire to find new paths, to rethink conventions, and occasionally to break with them. Using the navigation triggers a chain reaction, revealing the connections between the individual areas.
In order to reflect the development of content over the course of the symposium, the page starts with placeholders for images and analysis/evaluation texts, which will be exchanged following the events.

The Urban Design Master study programme at the HCU Hamburg unites theoretical and practical disciplines relating to the city of the present and the city of the future. The focus is on interdisciplinary research and design.
In order to incorporate the influence of given facts into the contentual design of the site, the start page has a “social wall” that mixes page content with (tagged) content from social media. In itself, this area of the site demonstrates the challenge that had to be fulfilled by the site’s graphic design: the idea is to give very heterogeneous image and text material a consumable, recognisable form, without imposing uniformity. In order to ensure this, the menu was given the most striking design of any element on the site. Each navigation point is a surface, whilst “home” and “search” are static elements, enabling quick navigation regardless of the configuration of the site. At the starting point, the sub-navigation is composed of two points – “About” and “Projects” – to which more areas and navigation options are added as one moves more deeply into the site. In addition to using the main menu and the search function, various cross-references and links within the file are provided to allow for non-linear navigation and for grouping under overarching header themes.
The static – not to say brutal – page structure is relieved by an animation for the menu points, lending the tabular ascetic a certain playfulness. The typographic concept is derived from a kind of default design. Conventional defaults (somewhat optimised) were adopted, with only the scale changed to make them different.
In order to avoid a colour branding and to keep all options open relating to working with the CI of the HCU, and also the design of products beyond the website, the colour scheme of the website is left to the user.

This page was created in collaboration with Maximilian Kiepe and Hanna Osen.

Hallo is a platform for the contemporary Internet that focuses on the fluid boundaries between technology, interaction, and aesthetics in the digital world.
Each website is a self-contained space; functioning in direct visual comparison with other spaces is not part of its concept. Its function may be anything from interactive installations to shopping systems. This makes it all the more different to find an exhibition space that allows one to do justice to all of these different functions, forms of interaction, and visual qualities.
This website is intended as an experiment in making content available on the Internet in a playful way. This is shown by the emojis used as navigation elements – which could be called the “Esperanto” of the Internet – and by the fact that it is possible to load the pages and to interact with them on any device without leaving the platform.
The “Cura­tion Weekend”, which allows maximum insight into the almost unlimited diversity of the Internet, has been an integral part of the concept since its launch. This format gives designers, programmers and artists the opportunity to share relevant or interesting websites with the community.

This project is practically the stereotype of a designer’s portfolio. The content is constituted by the originator and his oeuvre. In this case, the name of the studio reflects the two key components that are intended to be conveyed whilst representing the foundation of the site’s interactive character.
Reducing navigation to two areas – “who” and “what”– allows for radical simplification whilst also allowing scope for playful treatment of the content. The division system for the screen leads to a blending of content from the two areas, owing to the thematic breaking up of the two halves that occurs during interaction.
When stationary, the visual configuration of the site is characterised by a strong typographic profile combined with graphics of reproduction photographs. When one interacts with the site, the regularity of its layout is disrupted by transitions that appear erratic and by unexpected modifications to the interaction design.

The works of designer and professor of graphic design Ingo Offermanns combine tradition and modernity, convention and experiment. This makes it all the more difficult to find a digital form of presentation that does full justice to all this diversity and all the facets and possible interpretations of the content.
There is always a tension in focusing on content or object. At the beginning, working with their representation always poses a question about the possibilities for conveying the content contained in the artworks.
In Offermanns’ words, graphic design is “[…] a discipline of mastering the world, of translation, of construction, of representation, of memory and of multiplication.”¹
In this case, the efforts to accurately represent the dimensions of graphic design described by Offermanns are expressed by reflecting the spirit, the diversity, and the feeling of his artworks in visual extract form.
The typographic animation of the start page represents a visual interpretation of the contrasts that emerge. It transfers traditional artworks into the here and now, but also functions as a “break” element, dividing the page design from the works on display.
Beyond this, the site restricts itself to clear and minimalist interaction design and graphic design. In images and texts alike, the focus is on the content, in every case. Individual projects are shown along the z-axis, meta-information on the y-axis, and navigation between the projects on the x-axis. This permits a varied journey for the user, in spite of maximal reduction.

Roman Gysin’s web presence is not exactly intended as a portfolio. Instead, the idea is to put opportunity, inspiration, the working process, and the result on an equal footing, and to enable the viewer to combine the elements to form their own mental pattern.
An exhibition of Gysin’s work prompted the Zürich gallery of Herrmann & Germann Contemporary to write that: “[...] coincidence and intention, gesture and action play a critical role in the presentation of the individual artworks in confrontation.”¹ The interactive concept for the digital exhibition space is similar. A user who interacts with the content may also inadvertently become a designer: if the mouse cursor enters a specific area of the site, it activates a mechanism that manipulates the website’s colour and image world, giving the artwork a new context.
When one looks more closely, the seemingly chance images at the upper left-hand edge of the page and the resulting white spaces instantly do away with the other conventional digital interpretation of an art catalogue, with pictures listed in an index with an accompanying description.

“Appointment calendar”, “portfolio” and “study and learning information” are the main headings on the Klasse Grafik web presence. Such a large quantity of heterogeneous content requires a clear graphic design, and an even clearer interaction design.
As the curtain falls on the start page, an almost bombastic line of text makes way for a very clear and tidy, almost tabular layout. The categorising of content into two overarching rubrics (students/study) is enabled by a split screen. At the same time, these provide the stage for all picture content of the site. This form of separation enables a playful investigation of the content, juxtaposed with maximal clarity and structuring.
In spite of the site being strongly oriented toward content, the students and their pieces of work are in the foreground: firstly, through the visual placement of image material which appears exclusively in this context (portfo­lio/blog), and secondly through a “break” in the design to mark the “students” area.

This page was created in collaboration with Jana Reddemann, Max Prediger, and Roman Fischer.

Narrative is the keystone of Gottwald’s artwork, both in his individual images functioning as illustrations and in the sequences of his comics (published by Bachwald).
The start page of his web presence draws on the dimension of time – absent from books and drawings – by using movement to make the person interacting with the content an active part of the story, and, ultimately, to draw that person into the cosmos of the content.
In the pages that follow, a clear, linear layout combined with playful typography provides a framework in which Gottwald’s wittily related and sometimes rather absurd scenarios can unfold and reveal a life of their own.

Narratives from her own world provide a common thread that runs through the artworks of Sophie Schweighart. Her photographs focus on surreal motifs, and on performative representations that breathe artistic life into non-existent choreographed scenes.
The structure of the website allows Schweighart’s artworks, whose dramaturgy gives them an almost filmic quality, to be shown in the context of her overall oeuvre (a selection). The dimension of the individual artworks becomes visible only through interaction and the appearance of meta-information.
The zoom function, which can be applied to the whole site, and places individual images in focus, enables the viewer to reveal details that enhance their superficial impressions. When the page is in zoom mode, it is possible to navigate between the artworks without cancelling zoom mode.
Passive interaction – viewing – also influences the presentation. If it is left undisturbed for a number of seconds, the page goes dark, framing Schweighart’s artworks in black.

Photography plays a role in every medium, but not every kind of photography is intended for– or even suitable for – every medium. For instance, a digital photographic portfolio may, in optimal conditions, be able to represent the character of the individual series, but it can never capture the totality of several photographic series intended for an exhibition context.
Greiner’s artistic work extends to both graphics and architecture, and repeatedly addresses the theme of an artistic world that is created and manipulated by human beings. The quality of alienation in what is actually shown is reflected in the typographical handling of the titles. Individual pictures and series alike cannot be disassociated from their context. The white space around the artworks is broken up by the typography, leaving the viewer with only the overall picture.
In order to undertake a separation and hierarchisation of the content, it was divided into three levels. At the entry level, the artworks appear in the form of a linear path through an exhibition setting. All additional information, plus access to a password-protected area containing Greiner’s commercial work, is located on the second level.
A number of tests, however, showed that if interaction was to be reduced to two of the most conventional elements (click and scroll), then an introduction would be required. In this case, this is done by means of “operating instructions” that follow the cursor, located directly in the individual areas.

In the case of the record label The Press Group’s interim site, a small number of effects that aim to physically imitate a resonating body are used to produce a kind of interactive, digital glockenspiel.
This interpretation of sound in digital space provides the arc for the content on this site, which showcases the experimental activities of the artists represented by the record label.

In his artworks, the artist Julian Charrière moves between present and past, allowing viewers to see themselves as part of a transient, endangered world in a state of constant upheaval.
“Charrière is a neo-romantic nature adventurer who draws attention to the melting of the poles by burning holes in the ice in certain locations. In his installation We Are All Astronauts, he ground down globes, in order to show that the world is destroying itself.”¹
The white cube-like digital exhibition space is based on a classical art catalogue and constitutes a graphical framework that provides sufficient space for the unfolding of the sometimes fragile-looking artworks. The functioning of the navigation is revealed on the landing page, whilst an index is provided by the numerical listing of the projects. – As one interacts, this moves to the side, and, in minimised form, allows for quick navigation.
The reproductions of Charrièr’s individual artworks and series illuminate them from different perspectives, documenting the process and the exhibition context. Each individual view is placed in the context of the whole through the presence of the preceding and following image, but can also be viewed as an individual image thanks to the visual unobtrusiveness of the neighbouring pictures.

In terms of presentation and in her works, Hannah Dunkelberg interests herself in the abstract tracing of the space onto objects positioned there. This approach constantly produces new combinations through overlappings. An artwork that is, in itself, static interacts with its environment, and can therefore be seen and read in a new way in every location.
The blog-like portfolio is an attempt to apply this sense of ease to digital space. Transparency and layering are incorporated by overlaying a randomly chosen shape, multiplied to cover the whole surface, onto the content, thereby generating a new overall composition. When one scrolls down, the navigation – the only visually static element on the page – vanishes.
The option of deploying time in the form of sound and movement as a design element in digital space provides the basic conditions for the production of interaction concepts whose potential relates to material objects.

The digital exhibition space for the artist David Schiesser responds to the user’s media consumption habits. In an age of seemingly unlimited product ranges and attainability, non-availability is barely a factor anymore. One negative aspect of this is the resulting lack of awareness of the value of content. Visual impressions become a consumer commodity, and everything we see becomes simply a passing buzz in a world overloaded with stimuli.
The site concept includes frequent changes of the entire content; this means that content is available for a limited time only, and also leads to a restricted quantity of image material. Each displayed sequence of images will be removed at a non-specified future date. To remind viewers of this transient quality, the date of the change being made is displayed on the site.
This frequent and radical changing of the content enables Schiesser to curate his site without restrictions, thereby covering a wide spectrum – including a temporary exhibition, but also banal or even comical content – and mixing these areas together.

As the name suggests, the photography exhibition “Von Zehn, junge Positionen zur Wirklichkeit” (lit. “From ten, new positions on reality”) gives ten Hamburg photographers the chance to share their own personal view of the world with visitors. The spectrum ranges from black-and-white analogue photography to documentary photography work to digital snapshots.
Unlike printed formats, a digital representation offers the option of playing with the filling of surfaces in a static and non-static way. In the case of this exhibition, this provided the opportunity to create a hierarchical balance in the visual representation of the individual photographers and their artworks. When the page loads, a random generator positions the exhibition’s title within the viewport, so that each viewer sees it in intersection with a different picture. The page is divided into ten function buttons, each of which reveals to view a new artwork and its author.

In urban planning, new ways of working are being considered, in response to changed requirements. The symposium “Disziplinäre Grenzgänge” (“Disciplinary Boundary Crossing”) looks intensively at the wish for a closer interconnection of theory and praxis. In connection with the programme of events, a number of modules take place in which experts from different professions come together to discuss topical themes in urban planning and development, with the proceedings documented and evaluated during and following the symposium.
The website’s construction is modelled on a conventional one-pager. Its interaction and navigation models, however, break with all expectations. The graphic and interaction design references the subject matter: the desire to find new paths, to rethink conventions, and occasionally to break with them. Using the navigation triggers a chain reaction, revealing the connections between the individual areas.
In order to reflect the development of content over the course of the symposium, the page starts with placeholders for images and analysis/evaluation texts, which will be exchanged following the events.

This website uses Google Analytics, a web analytics service provided by Google, Inc. (“Google”). Google Analytics uses “cookies”, which are text files placed on your computer, to help the website analyze how users use the site. The information generated by the cookie about your use of the website will be transmitted to and stored by Google on servers in the United States .
In case IP-anonymisation is activated on this website, your IP address will be truncated within the area of Member States of the European Union or other parties to the Agreement on the European Economic Area. Only in exceptional cases the whole IP address will be first transfered to a Google server in the USA and truncated there. The IP-anonymisation is active on this website.
Google will use this information on behalf of the operator of this website for the purpose of evaluating your use of the website, compiling reports on website activity for website operators and providing them other services relating to website activity and internet usage.
The IP-address, that your Browser conveys within the scope of Google Analytics, will not be associated with any other data held by Google. You may refuse the use of cookies by selecting the appropriate settings on your browser, however please note that if you do this you may not be able to use the full functionality of this website. You can also opt-out from being tracked by Google Analytics with effect for the future by downloading and installing Google Analytics Opt-out Browser Addon for your current web browser: http://tools.google.com/dlpage/gaoptout?hl=en.