8. Sep 2011

DE_flag GB_flag

for english readers

in_der_anwendnung

Neue Buttons

Ein gut besuchte Seite auf DDDD.mettre ist die Button-Werkstatt. Dieser Artikel ist inzwischen 5 Jahre alt. Die dort vorgestellten Button sind noch immer modern, doch die Entwicklung geht weiter, es hat sich einiges verändert. Es ist mal wieder die Zeit über Buttons zu schreiben.

Für den ersten Eindruck ein Blick auf die Buttons der DBZ-Kalender Komponente oder deren Verwendung in einer anderen Anwendung.

In iOS und OSX verloren die Buttons ihre Farben. Mal wieder weg von der Farbe hin zum Grau und es ist gut so. Unaufgeregte Buttons passen viel besser zur Projektarbeit – selbst reine Windows-Kunden kennen die Buttons von ihren iPhones/iPads. Wiedererkennung ist also kein Problem.

Die entgegengesetzte Entwicklung beobachte ich unter Windows. Dort werden die Buttons immer buntiger. In der Projektarbeit ergo in Your-companies-app sind diese Buttons unbrauchbar – sie machten das graphische Chaos perfekt.

Eigene Buttons dieser buntigen Art zu erzeugen frißt zu viel Zeit und sind doch nur sub-par. Es gibt Sammlungen zu kaufen – hübscher oder verwendbarer wird es nicht.

Hier eine kleine Auswahl an iOS/OSX angelehnter Button aus meinen aktuellen Anwendungen:

iOS_buttonstyle

Ausgangslage sind die Symbole aus dem Noun-Projekt. Hier finde ich viel Brauchbares zu CreativeCommons BY 3.0-Lizenz-Bedingungen. Die Symbole sind professionell. Das Format ist SVG, d.h. ich kann sie abwandeln und ggf. Teile rekombinieren oder auch 1:1 in 4D verwenden.

SVG in 4D funktioniert recht gut, wenn auch noch nicht vollständig. Mir fehlen einige Manipulationen, die ich mit dezidierten Werkzeugen einfacher handhaben kann und im Ergebnis zum gewünschten PNG mit Alpha-Kanal führt. In meinem Workflow setze ich

ein. Die fertigen Buttons landen als PNGs mit den 4 Zuständen activ-hover-pressed-inactiv im 4D Resources-Ordner. Von den daumenbedienbaren Button in 64*64 Pixel leite ich die Größen 32*32 und 24*24 ab.

iTunes-ähnliche Button

iTunesStyle

In den Fußbereichen eines Formularen verwende ich iTunes nachempfundene Typen. Diese sind kleiner, verwenden aber die gleichen Symbole. Das funktioniert, weil die Symbole einfarbig sind. Farbige Symbole matschen zu wenn sie in diesen kleinen Größen verwendet werden.

iTunesStyleGraphik

Auch die iTunes-ähnlichen Buttontypen kennen die 4 Zustände activ-hover-pressed-inactiv. Sie wirken am besten auf einem dunkleren Hintergrund.

In der V12 kann ich in den Eigenschaften eines Button-Objektes nicht festlegen, welche Größe ein Bild im Button hat. Schade! Das würde mir die Arbeit sparen, mehrere Pixelgrößen vorzuhalten.

Nun mal ran. Die Quelle für professionelle Symbole kennen Sie, die ist gut, immer mal wieder hingucken. Sketch, OmniGraffle und GraphicConverter kosten nicht die Welt.

Sie möchten den Workflow nicht selber entwickeln oder haben kein Händchen fürs Graphische oder Sie möchten einen Satz Button-PNGs haben? Klar, für den Fall habe ich auch einen Button:

 

DE_flag GB_flag

lieber auf deutsch

in_der_anwendnung

New buttons

A frequented page of DDDD.mettre.de is Button-Workshop. That article is 5 years old now, those buttons are still current. Things are changing. It's the time again to write about buttons.

Have a look at those Buttons from the DBZ-Calendar component or my current usage in project-work.

With iOS and OSX buttons loose their colors. Again the new color is grey and I like that. Non-thrilling buttons are much better suited for project-work – even Windows-users know them from their iPhones/iPads. Recognition should be no problem.

Just the opposite direction is under way on Windows: distracting button-colors all over. While building in Your-companies-app those buttons will make things worse – unless you love the chaos and make a living from support.

For me it's too much work, creating colored buttons. I could buy a collection – but those are neither nicer nor better usable.

This is a small collection of iOS/OSX look-alike buttons from current work:

iOS_buttonstyle

I did start with the professional symbols from Noun-Project. They have very good ones and license is CreativeCommons BY 3.0. Format is SVG, i.e. I can enhance or recombine or use them as they are in 4D.

SVG is pretty well implemented in 4D, even when some options are missing. So I'm using tools which make things easier and faster. The final results are PNGs including alpha-channel. My workflow uses:

Finished buttons are 4-state-buttons activ-hover-pressed-inactiv, format is PNG. Starting from thumb-able sizes in 64*64 pixels, I rerender into 32*32 and 24*24.

iTunes-inspired buttons

iTunesStyle

For the footer-area of forms those serve well. The buttons are smaller and use the same basic symbols, which is possible with single-color symbols. Multicolored ones would smudge into some noisy grains.

iTunesStyleGraphik

Here again 4-states activ-hover-pressed-inactiv. They are best suited for darker backgrounds.

With V12 stiil, it's not possible to set the symbol-size with a button. That would save me the necessity for different pixel-sizes. Maybe some day …

Now it's your turn. You know a source for professional symbols. Visit their website from time to time, it's worth it. Your pockets needn't be that deep to get a copy of Sketch, OmniGraffle and GraphicConverter.

This is not your talent, you'd be better off learning the workflow than finding out yourself or you'd even better buy finished ones. No problem, there is a button for that: