Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Basics Interface 16|1

This is the documentation for the course „Basic Interface“ with Professor Boris Müller in summer semester 16.

The course gives a general overview of different areas of interface design. During the course we worked on 4 different tasks: Digital book, sound picture, Graphical user interface and 1000 words. During doing the tasks we mentioned basics of interface design including typography, data visualization, user interfaces and information architecture.

1. Digital book

BUCH_menu1.pngBUCH_menu1.png

The first task of the course was to make a digital book (screens of the digital book in horizontal format for a tablet and vertical for a Smartphone).

On this task we worked in team with Matias Lasen. We wanted to choose a book not only with text but also with pictures. After a short discussion we could agree on a book about beer „Bier. Brauereien und sorten aus der ganzen Welt“ written by David Kenning. The table of contents of the book is divided over the countries that produce the beer. The book contains relatively short texts (description of the beer), pictures of beers and tables with short information. The layout of the book is limited, mostly black and only darkly red is used as an accent color on the cover.

Our main attention was make a good arrangement combination of headline, test, picture and the table. Another interesting aspect was the screen typography: font and line spacings. The layout of the digital book we have tried to sustain in the same limited form as it was used in the original book. The feedbacks to our project were very helpfully to make clear navigation. A great challenge was the adaptation of the layout format of a tablet version to the mobile version.

All together was a good entrance which trained particularly the work on details.

BUCH_menu7.pngBUCH_menu7.png
BUCH_menu6.pngBUCH_menu6.png
BUCH_menu5.pngBUCH_menu5.png
BUCH_menu4.pngBUCH_menu4.png
BUCH_menu3.pngBUCH_menu3.png
BUCH_menu2.pngBUCH_menu2.png
BUCH_menu1.pngBUCH_menu1.png

2. Klangbild (Sound picture)

Klangbild_Candyland.jpgKlangbild_Candyland.jpg

For the second task we needed to choose a sound (not longer then one minute) and make it's visualization, that can be freely chosen.

I choose a song from one of my favorites group Cocorosie-Candyland, it's live version. It seemed to me quite interesting research of sounds. For the beginning it was necessary to choose the most interesting piece and to cut him. The analysis took me a lot of time. I listened to the song again and again trying and mark on the paper identical sounds. With a lot, a lot of time at the audiotrack I still succeeded single sounds, background noises and voice. But the most difficult was to deal with a harp. I have many times regretted that I never practiced music. The feedbacks to this project were very helpfully, the wish was to make more precisely the sound of the harp that I also have tried to make. Unfortunately my hearing isn't enough for ideal version. Nevertheless this task was the most pleasant for me, it was interesting and unusual to plunge completely into sounds and music.

3. GUI - Brainstorming App

GUI_Brainstorm_Navigation.pngGUI_Brainstorm_Navigation.png
GUI_7.pngGUI_7.png
GUI_6.pngGUI_6.png
GUI_5.pngGUI_5.png
GUI_4.pngGUI_4.png
GUI_3.pngGUI_3.png
GUI_2.pngGUI_2.png
GUI_1.pngGUI_1.png
GUI_13.pngGUI_13.png
GUI_12.pngGUI_12.png
GUI_11.pngGUI_11.png
GUI_10.pngGUI_10.png
GUI_9.pngGUI_9.png
GUI_8.pngGUI_8.png

The next task was to make a Brainstorm app (at least 4 screens). On this task we worked in team with Phillip Grandy.

Starting point of our solutions was make the brainstorming app as simple as possible for the user. When the person starts the app, he logs-in, then he needs to make a new project or to choose an existing one. Projects are exposed on time, it is possible to see when the project is going to end. In the project it is also possible to enter a description and to open it to your partners or friends. The main idea is to build a Mind Maps that will help in decision-making. With Phillip we also sketched an information architecture of the application for better understanding of the app.

4. 1000 Words

Saprykina_1000_Worte.pngSaprykina_1000_Worte.png

The last task was an infographic. The idea came to me quickly enough because I was cooking this the Russian salad (named „Olivier salad“) and has thought that would be attractive to represent it's preparation. At first I have made sketches on the paper. I have represented all ingredients and have step by step tried to represent what a person needs to do with I got some useful tips and remarks which I have considered in my final work. In my opinion the result has turned out visually and simply. Perhaps someone will use further my infographics for preparation of this popular Russian salad.

Conclusion

The course gives a general overview from easy to complicated areas of interface design. It was very intensive to achieve good results. I found the course very well organized, the structure of alternate input lectures and feedback rounds was chosen well. Constructive criticism of Prof. Boris Müller personally by the presentations was very helpful and motivating. I found the team work also very pleasant, maybe it could be better to select the partner, as at the beginning I had problems with both partners who decided not to graduate the course.

This course is to be recommended definitively!

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Sommersemester 2016