Task:

12.11 – 3 möglichst verschiedene produktverpackungen pro kategorie. kategorie anmelden, im pad maintainen. eventuell fotos, aber besser mitbringen.
im blog diskutieren nach folgenden gestaltungsmerkmalen: typographie, farben, form(en), grid, gestaltgesetze, zielgruppe,  »allfälliges«. 

Implementation:

1. DeBeukelaer – Creamy Cookies

• Typographie: Die Überschrift besteht aus einer dynamischen Schreibschrift (ähnlich des Herstellernamens), die Produktbezeichnung jedoch aus einer Blockschrift. Es wirkt optisch sehr stimmig.
• Farben: Dezentere Hintergrundfarben, im Vordergrund eher Text und und das Bild der Cookies. Blau-,Rot-, Grün- und Brauntöne
• Form(en): eckige Schachtel, recht groß und auffällig
• Grid: Auf der Vorderseite der Schachtel ist das Muster ‚augedruckt‘ (spürbar), damit hebt es sich optisch und haptisch von der Schachtel ab.
• Gestaltgesetze: Sehr geradliniges Design, Überschriften klar erkennbar, man weiß sofort was zusammengehört
• Zielgruppe: ab Jugendliche, für (Klein-)Kinder wirkt die Schachtel zu erwachsen.

2. Milka – Choco Cookies

• Typographie: Die Überschrift besteht aus einer dynamischen Schreibschrift, die zweite Überschrift wieder aus einer serifenlosen Schriftart. Der Unterschied besteht hier eher darin, dass der Fokus eher auf dem Hersteller als auf dem Produkt ist.
• Farben: Milka-typisches knalliges Violett mit weißer Schrift. Hoher Wiedererkennungswert.
• Form(en): Verpackung aus Plastik/Alu. Die Verpackung verfügt über einen ‚Zip‘, um die Verpackung schnell öffnen und wieder verschließen zu können. Funktioniert meiner Erfahrung nach aber selten, da die Verpackung geschlossen bleibt und nur die Folie darüber abgezogen wird. Verpackung ist „liegend“.
• Grid – nichts besonderes
• Gestaltgesetze: –
• Zielgruppe: verspielter als DeBeukelaer, daher eher Kinder/Jugendliche

3. Bahlsen – Mini Cookies Chocolate Chips

• Typographie: Bahlsen in Schreibschrift, die Überschrift in serifenloser Blockschrift, und die dritte Zeile und Groß/Kleinbuchstaben. Vom Aufbau daher gleich mit de DeBeukelaer.
• Farben: Blau, Rot, Braun
• Form(en): stehende Verpackung aus Plastik/Alu. Eine sinnvollere Verpackung als die vorhergehenden, da die Kekse darin liegen und am wenigsten Platz verbrauchen, daher auch die kleinste Verpackung (und auch die, die man wahrscheinlich am ehesten übersieht)
• Grid: nichts besonderes
• Gestaltgesetze: Schriften nah beieinander. Wieder ähnlicher Aufbau wie bei den Produkten zuvor: Zuerst die Texte, welche als zusammengehörig zu erkennen sind, darunter das Produktbild.
• Zielgruppe: Jugendliche/Erwachsene, nicht so verspielt und knallig wie das Milka-Produkt.

Task:

11.11 – entwerfen sie zwei funktionen, die erst durch den touchscreen, den sie gestern in ein gerät eingebaut haben, möglich werden. machen sie ein foto von der bedienungseinheit des geräts, und verwenden sie die technik der »hybrid sketches« von pp127-132.

Implementation:

My coffee machine

Above you can see my coffee machine, which has three buttons for Power, „make coffee“ and steam, as well as a wheel for the amount of water. The wheel for the amount of coffee beans is directly in the coffee bean reservoir on the top right.

Hybrid sketch – water amount slider

The first function shows how to control the amount of water (water, because the right Button labeled with „W“ is selected). It’s a digital slider, therefore the user can wipe on the control to select the amount. The Buttons „+“ and „-“ add/reduce 75ml of water. If the „K“ ( for „Kaffee“ 😉 ) is selected, the amount of coffee can be selected in the same way. The amount is visible on the digital display. By holding the GO-Button for 2 seconds, the coffee will be prepared.

Hybrid sketch – quick menu

The second function shows a quicker way to choose the coffee type, which is easier and faster (but the amount of water and coffee is predefined).

Reflection:

I haven’t heard of „hybrid sketching“ before, so this was completely new to me. An interesting way to design an interface. Using a picture makes the design seem more alive and the user as well as the designer can better understand how well the implementation will work.

Task:

10.11 – wählen sie die bedieungseinheit eines küchengeräts (herd, kühlschrank, geschirrspüler, etc) oder feuchtraumgeräts (waschmaschine, trockner, schleuder, etc) und stellen sie sich vor, statt der vorhandenen regler, knöpfe und anzeigen wäre dort ein touchscreen eingebaut (die maße stehen ihnen frei). wie würde das interface dann aussehen? skizzieren sie nach den prinzipien von p91-94 zwei screens dieses interfaces und beschreiben sie, wie die interaktion dort vor sich geht. beschränken sie sich dabei auf die abbildung der vorhandenen funktionen des geräts.

Implementation:

The first screen shows a touchscreen conrolling my coffee machine. The idea is all important tasks are immediately accessible. The top center is a digital display which shows the current status and gives additional in information.

The second screen shows options from a menu.

Reflection:

Screen design is something that every student in media informatics should have done so far, therefore not much new in this lesson, although i can’t remember that i have ever designed a software for a touch display.

Task:

9.11. – teile die seite im skizzenbuch in einen 5×3-raster und zeichne abwechselnd in jedes feld eine person, die etwas macht oder eine emotion ausdrückt, inkl. gesichtsausdruck! vgl. p87-89

Implementation:

Faces and Emotions

Reflection:

That was fun! I felt that i do some kind of comic and could play around. It was sometiimes difficult to express the emotions i wanted to convey. „Extremely happy“ is the most difficult for me, because i can’t draw the eyes correctly.

Task:

6.11. – fülle eine seite im skizzenbuch mit vielen kleinen menschen, die alle verschieden gezeichnet sind. vgl. p87

Implementation:

Reflection:

I recognized that i am really not skilled in drawing people 😀 This is definitely something i have to work on and improve because every designer should be able to draw emotions and stick-figures in different ways. Good exercise, that i will have to repeat to improve myself.

Task:

5.11. – mach auf eine seite im skizzenbuch einen 6×4 raster, und zeichne in jedes kästchen ein kleines, vereinfachtes objekt (vgl. p86) aus den bereichen sport oder kunst.

Implementation:

Sport Drawing

Reflection:

I had fun during the exercise, although i had to look up the internet to get some impressions and ideas. I think if i would do more of drawing and simplifying objects, i would improve significantly in that area.

Task:

4.11. – sketch what you see

führe die übung durch, die auf den seiten 75-82 beschrieben ist. poste das ergebnis.

Implementation:

Drawing a person from imagination

Copy of „Sean’s Afternoon“

Upside-down in progress…

Upside down drawing finished

Reflection:

This was interesting, but veeeery time-consuming. It took me far over an hour for the drawings. The upside-down drawing technique turned out to be effective, but it also takes a lot of patience for every single line to be correct.

Task:

2.11. – taking your pencil for a walk. schau das folgende youtube-video: https://www.youtube.com/watch?v=ldq1QwaLAUE

mach dabei die in 3.1 beschriebene übung. poste das bild auf den blog. 

3.11. – schau dir 3 andere blog-einträge zu der »taking your pencil for a walk« übung an (die drei direkt unter deinem eintrag unten), und poste auf dem blog einen kurzen kommentar.

Implementation:

i took the pencil for a walk

Blog-Comments: 

Task:

28.10 – bis seite 34 lesen. führe methode 1-3 an einer (ungewöhnlichen) smart phone software durch, die du öfters mal verwendest.

method 1 – min 4 sketches von demselben screen

method 2 – min 2 sketches von verschiedenen videos

method 3 – 1 sketch von einem anderen video.

Method 1
Open up an application of your choice on your computer. Giving yourself 30 seconds or less, try to capture the essence of an idea as a scribble sketch. Then repeat this, where you create new scribble sketches that capture different ideas in an application. Now try this again with different – perhaps unfamiliar – applications.
Method 2
Search YouTube or other sites for videos of innovative interfaces. As you are watching them, scribble sketch as many ideas that capture your interest without pausing the video. This will force you to sketch very quickly, i.e., as soon as you see an idea.
Method 3
Redo Method 2, but this time don’t look at your drawing while you are sketching. The trick is not to move your hand around that much while scribbling, otherwise your lines will not be in the right place. It takes a bit of practice, but you will be surprised how recognizable things are, at least to you.

Implementation:

Sketches using method 1 on the app: theScore Esports

Link: https://play.google.com/store/apps/details?id=com.thescore.esports&hl=de

theScore Esports is an android app showing eSports Data (game stats, etc.). My approach was to first sketch the Layout, then have the focus on menu and then on Content. Finally i tried to draw an abstract layout, trying just to remember what controls are at which positions.

Screenshot of the app

Sketches with detail to Layout, Menu, Content and an abstract layout schema

Sketches using method 2 on the youtube video
Samsung Gear S2 user interface – Hands on at IFA 2015

The first video explains the input methods of the samsung gear s2 smartwatch. A wheel on the left side controls the switching of apps, windows, etc.

Sketches using method 2 on the youtube video
Expanding the Input Expressivity of Smartwatches with Mechanical Pan, Twist, Tilt, and Click

The second video is about a watch, that has several input methods. By panning, twisting, tilting and clicking the user can perform multiple inputs at once.

Sketches using method 3 on the yotube video
Toffee: Enabling Ad Hoc, Around-Device Interaction with Acoustic Time-of-Arrival Correlation

The third video was difficult to sketch without looking. It’s about a system, that is able to recognize from which direction sound is incoming. Because it’s always about a smartphone/tablet/pc and a user tapping somewhere else to make sound, it was difficult to keep relation between these two. The last sketch on the bottom of the paper should demonstrate a game, where the center shoots at enemies and the direction is controlled by tapping in the correct direction. Since i was completely off the shooting line when drawing the tap, the sketch doesn’t make much sense.

sketching without looking

I also tried the same video with looking at the paper. The result is much better.

another try with looking on the paper

Reflection 28.10.2015

Drawing without being able to look at what i am drawing is difficult. At my stage of skill, i would always go over the sketches when i have the time afterwards. Otherwise i would not expect them to make much sense to me when looking at them one week later. Comparing it to the second try (with looking), i think i will know what the idea was in the video.

Task:

26.10 – stell dir vor, du hast einen smart phone touch screen, der spürt, wie fest du drückst. was könnte man mit so einem touch screen besser machen als es jetzt gemacht wird? dokumentiere 7 ideen, was man damit anders machen könnte, und dann nimm eine dieser ideen und kreiere 7 variationen. (eh klar: nicht erlaubt ist es, sich anzuschauen, was es dazu jetzt schon gibt!)

Implementation:

The first thing that comes to my mind is to select different states of one option. This could be to set a slider bar accordingly to the input pressure.

Another idea is to improve existing apps ( i am an android user btw 😉 ). Starting with the home applications, including a quick-access feature would help to speed up find favorite apps. This feature should be modified be the user (choosing the app, set pressure and duration to start the behaviour).
An app that would benefit from pessure input would be Google Maps. The user could Zoom directly without any slider or gestures and just with one finger. The camera app can be improved by selecting different states while triggering a photo: the pressure could be used to pre-focus, taking a photo with or without flash, zooming in/out can be used with another finger.
And a feature that will enhance any keyboard app is switching between upper and lower case letters (pressing harder for upper case letters).

Creating new apps relying on the feature of pressure is interesting and challenging. Assuming that the display is heavy weight resistent and very distinctive, the first app would be „Scales“ – an app for measuring weight.

Games can also be enhanced using the feature. A racing game could use pressure to acc/decelerate the vehicle. Even the breaks could be controlled with that sensitivity feature. A plattformer would even more benefit. The speed of the game character could be directly controlled pressing a (virtual) left or right button, the height of the jump would be set by pressure too. Beat’em up games would use the feature to select the punch/kick (light, medium, hard) or any other action.
It could also be used to raise the difficulty level, like QWOP (https://de.wikipedia.org/wiki/QWOP, a game that has it’s challenge in mastering the controls).
Another game that relies solely on the input feature is an adoption of guitar hero, but the goal is the following: a 2-dimensional coordinate system, in which a point is shown (e.g. x=sound volume, y=pitch) and the user has to control two pressure buttons (controlled with thumbs) and the better the point is approached, the more correct the sound plays.

The last idea is to introduce the function as a system wide „right click“ in the android world. Whereever there are options that can be offered to the user, he/she will access the context menu be tapping on the control (e.g. button, text field etc.) and push a bit more to show the context menu.

Summed up, the five features are:

• Input feature: Slider (choose one option out of severals)
• Improving existing apps: Home App, Google Maps, Keyboard
• Creating new apps: Scales
• Improving games: jump’n’runs, racing games, beat’em ups,…
• Input feature: Context Menu

7 Variations of the feature Slider:

1. Volume Control
2. Zooming
3. Brightness Control
4. Display Timout
5. Brightness of Flashlight
6. Choosing between different profiles
7. Switching between display options (list, tiles, etc.)

Reflection 26.10.2015

It was difficult to come up with completely new ideas. I tried to find ideas that are different from each other which is not easy at all.

Task:

27.10 – nimm eine andere idee und kreiere 7 variationen.

Implementation: 

7 Variations of a jump’n’run game:

1. Speed – from sprinting to creeping (yep, there are stealth missions)
2. Height of jump
3. Shooting: fire rate (higher fire rate kills enemy faster, but reduces ammunition faster)
4. Jumping and stomp down: a jump that will break the floor on landing. Stomping forward will break walls.
5. Shooting: Bullets depending on pressure: high pressure for rockets (for heavy enemies), pressing slightly toggles bullets (for fast enemies)
6. Higher pressure for moving objects faster (or heavy objects at all), but slight objects are pushed away, which can attract enemies
7. A button spins the character – higher pressure results in spinning faster

Reflection 27.10.2015

Finding ideas for a jump’n’run game was fun and not as difficult as the challenge from yesterday. Finding ideas for games was easier for me than finding input options for apps (respectively result of that input).

Sketchbook

Sketchbook – Cover

The first decision i hade to make is which cover i prefer. I bought a book with a hard cover because i thought it would be easier to draw outside due to the solid background.

The second decision was the size – A5 is in my oppinion to take it with me, but is also big enough for sketches.

The third decision was the page layout/background. The graph paper will hopefully help me with my drawings, since i’m not a good drawer and that’s why i decided against plain paper.

Sketchbook with graph paper