For each color had to pick the color inside of Affinity Designer, copy the hex code, open the color dialog on Piskel, paste the code and press enter. If you want to transfer a lot of colors, this can get a little bit annoying.

The good thing: Piskel is an Open Source web project. That means with a little effort I could solve this problem for me. Because I know, there is a native color control which has a picker which works across the whole screen (atleast in Chromium browsers): <input type="color">

Great. Now I needed to bring this to the Piskel application and make it overwrite the current color. I tried to find some kind of a state in the JavaScript code I could use. Because Piskel’s source code is on GitHub, I could just clone the project to my machine and search through the code. Because I know from the User Interface that the main color is called “primary color” I was searching for “primary”. And voila, I found an event called "SELECT_PRIMARY_COLOR". Sounds like exactly what I need. Now I needed to know how to trigger this event. So I was searching for where "SELECT_PRIMARY_COLOR" is used in the code and this is what I found:

$.publish(Events.SELECT_PRIMARY_COLOR, [color])

Nice, looks like I could just use something like $.publish("SELECT_PRIMARY_COLOR", "#ff00ff"). I tested it in the browser console and it worked! I now also used the console to put the color input element to the HTML document and passed an event listener when the input is changed:

const colorInput = 
  document.createElement("input")

colorInput.id = "lgkColorInput"
colorInput.className = "tool-icon"
colorInput.title = "Native color picker"
colorInput.type = "color"

// The tools container of Piskel's UI
document.getElementById("tools-container")
  .append(colorInput)

document.getElementById("lgkColorInput")
  .addEventListener(
    "input", 
    ({currentTarget}) => {
      $.publish("SELECT_PRIMARY_COLOR", 
      currentTarget.value)
    }
  )

It looks great, like it was always part of the UI. I found the "tool-icon" class name, because all other tool buttons use it too.

Awesome, but everything I run on the browser console is just temporary, so I needed a way to always execute it when I’m on Piskel. The good thing; there is a browser extension for this: Custom JavaScript for Websites 2
I installed it, pasted my code in and it works!

So if you would like to my new tool aswell, just install the extension and paste in my code and it should work. ^^

You could do it like this:

import React from "react";

class MyComponent extends React.Component {
    render() {
        return (
            

                {"LGK" == "awesome" ?
                    
LGK is awesome!
                : 
                    
LGK is not awesome :C
                }
            
        );
    }
}

This works without any problem. But you always have to set the else part. But in many situations you only need the “if part”.
In this case, this way is much nicer:

import React from "react";

class MyComponent extends React.Component {
    render() {
        return (
            

                {"LGK" == "awesome" &&
                    
LGK is awesome!
                }
            
        );
    }
}

A benefit of objects is that you can directly call its children elements (properties) by name. While arrays only have index numbers.

Here is a simple example:

const exampleDataArray = [
	{
		id: 8462943,
		name: "Google",
		url: "http://google.com/"
	},
	{
		id: 9847323,
		name: "Amazon",
		url: "http://amazon.com/"
	},
	{
		id: 938442934,
		name: "Twitter",
		url: "http://twitter.com/"
	}
];

function getDataById(id) {
	for (let i = 0; i < exampleDataArray.length; i++) {
		if (exampleDataArray[i].id === id) {
			return exampleDataArray[i];
		}
	}
}

So in this example when I want to get an item by its ID or any other property I have to go through each other item first. Depending on how many items you have and how often you need to get one item, it can take lot of time.

If you use an object instead of an array it could look like this:

const exampleDataObject = {
	8462943: {
		name: "Google",
		url: "http://google.com/"
	},
	9847323: {
		name: "Amazon",
		url: "http://amazon.com/"
	},
	938442934: {
		name: "Twitter",
		url: "http://twitter.com/"
	}
};

function getDataById(id) {
	return exampleDataObject[id];
}

This way we can directly point to the item we want and don't have to use a loop.

Emoticons sind aus sozialen Netzwerken längst nicht mehr wegzudenken. Sie werden vor allem dafür genutzt, Gefühle auszudrücken, etwas was durch Wörter häufig schwer auszudrücken ist. Oder sie untermahlen Geschriebenes, u.a. auch um Missverständnisse des Textes zu umgehen.

Aber nicht nur beim Austauschen von Nachrichten sind Icons hilfreich. Für die User Experience sind Symbole ein wichtiger Bestandteil. Ein ☰ öffnet ein Menü, ein 🔎 führt eine Suche aus und mit einem ♥ favorisiere ich etwas.

Oh, hast du gesehen, wie ich Icons sogar hier im Artikel verwendet habe? Und das ging ganz einfach. Und damit kommen wir zum eigentlichen Thema dieses Artikels. 〠

Ich benutzte dafür keine Icon-Library wie FontAwesome. Für das 〠 zum Beispiel habe ich nur folgendes als HTML geschrieben: 〠
Damit habe ich einfach nur den Unicode für dieses Symbol benutzt. Denn eine Menge Icons haben — genauso wie Buchstaben und Ziffern — einen eigenen Unicode.
Vorraussetzung dafür, dass das Symbol auch angezeigt wird, ist dass die verwendete Schriftart dieses auch enthält.

Finde Icons mit Graphemica

Graphemica sucht Icons im Unicode basierend auf Stichwörter.

http://graphemica.com/

In der Suchleiste gibst du einfach ein was du brauchst. Auf der Detail-Seite zu einem Icon findest du dann die nötigen HTML-Codes zum Einbinden auf deine Seite.

Der Trend geht in diese Richtung, weil Bildschirme immer hochauflösender werden. In Zeiten von 4K und Retina Displays haben UX-Designer deutlich mehr Möglichkeiten Dinge auszuprobieren, die zuvor noch undenkbar waren.

“Thin Design” scheint ein Teil davon zu sein. Und es beschränkt sich nicht nur auf die Typografie. Wer in letzter Zeit die Design-Entwicklungen von Microsoft (Windows 10) und Apple (OS X, iOS) verfolgt hat, wird feststellen, dass auch Symbole vom Schlankheitswahn betroffen sind.

Hier mal ein Beispiel, das ich auf der Apple-Website gefunden habe:

Wo kann ich “Thin Design” einsetzen – wo nicht?

Als UX-Elemente halte ich “Thin Design” für eine angebrachte Sache. Sowohl für Typografie, Symbole, aber auch für andere Controls, wie Buttons, Eingabefelder, Trennlinien.
Linien sollten aber möglichst vektorbasiert erzeugt werden und nicht beispielsweise als Bitmap, um eine Skalierbarkeit zu ermöglichen. Es besteht nämlich die Gefahr, dass die Linien dadurch verschwinden könnten. Bei Webdesign könnten Thin-Elemente beispielsweise per CSS (Border) oder SVG erzeugt werden.

Unangebracht halte ich Thin Design allerdings beim Logo-Design. Ein Logo muss universell einsetzbar sein und eine starke und selbstbewusste Darstellung haben. Besteht eine Bildmarke nur aus dünnen Linien, kann es schnell untergehen, wenn nicht sogar verschwinden. In Fließtexten bieten sich “leichte” Schriftarten auch nicht an, weil dadurch die Lesbarkeit beeinträchtigt werden kann.

Beim Redesign der Nachrichten-Feeds auf Startmon.com habe ich mich auch mal am “Thin Design” orientiert.
Du kannst es betrachten, wenn du auf https://startmon.com/ gehst und dann bei “Nachrichten-Feeds” unten links auf den Maximieren-Button klickst.

Wie wäre das? Ich ertappe mich oft dabei, einen Online-Dienst nutzen zu wollen, es mich dann aber abschreckt, dass man sich registrieren muss.

Ich bin halt einfach zu faul dazu, meine E-Mail Adresse anzugeben, mir ein Passwort auszudenken und Angst darum zu haben, ich könnte dieses vergessen. Vor allem graust es mich davor, in Zukunft vom Anbieter vollgespamt zu werden.

Glücklicherweise bieten es mittlerweile auch viele Dienste an, sich mit Google+, Facebook oder Twitter anzumelden. Doch wie wäre es, wenn du dich gar nicht anmelden bräuchtest?

Häufig ist eine Anmeldung an einem Service nur notwendig, damit deine vorgenommenen Einstellungen erhalten bleiben. Nehmen wir als Beispiel Adobe Color CC.
Es ist ein Dienst, um Farben zu mischen und diese in sogenannten Themen zu speichern. Um den Dienst zu nutzen, ist keine Anmeldung notwendig. Du kannst ihn auch ohne verwenden. Nur kannst du die Farben dann eben nicht speichern.

Um die Farben zu speichern, musst du ein Adobe-Konto besitzen und dich anmelden. Doch wie wäre es, wenn du die Farben in anderer Form speichern könntest? Als Cookie in deinem Browser! Und wenn du die Einstellungen in einem anderen Browser nutzen willst, exportier einfach den Cookie und füg ihn im anderen Browser wieder ein.

Speicher deine Einstellungen einfach ab.

Die IcoMoon App verfolgt bereits diesen Ansatz. Mit diesem Dienst kannst du aus SVG-Dateien WebFont-Icons machen und diese in Sammlungen speichern. Es ist keine Anmeldung erforderlich. Die Einstellungen bleiben im Browser gespeichert. Du kannst die Einstellungen in Form einer config.json-Datei exportieren und in einem anderen Browser wieder importieren.

Also, ich finde dieses Konzept genial. Natürlich eignet es sich nicht für alle Anwendungen. Denn wenn die Einstellungen als Cookies gespeichert werden, sind sie leicht für andere einsehbar. Aber solange es sich nicht um sensible Daten handelt, halte ich es für völlig in Ordnung.

Colorganize wurde nun komplett auf HTTPS umgestellt. Außerdem wurde das Logo aktualisiert.

Um den Service noch nützlicher zu machen, plane ich eine Windows App. Mit Hilfe von CefSharp soll Colorganize in einem eigenen Fenster geöffnet werden und bequem von der Taskleiste aus gestartet werden können.

In Kürze dazu mehr.

Colorganize.com »

Eigene Listen und Links

Das Projekt “startmon” wird wieder in Angriff genommen und mehr Features sind geplant!
Personalisierte Link-Listen sind mit Preview N°16 soweit einsatzbereit. Listen und Links lassen sich erstellen, bearbeiten und löschen.

Dynamisches Abrufen von Favicons

Mit einem neuen Algorithmus, werden Favicons von Seiten automatisch von Google abgerufen und zwischengespeichert.
Alle 30 Tage werden die Icons automatisch aktualisiert.

Gallerie für Suchmaschinen

Nutzer sollen zukünftig auch ihre Suchmaschinen anpassen können.
Dafür soll es eine Gallerie mit Suchmaschinen geben, wo Nutzer welche aussuchen und aktivieren, aber auch welche abwählen können.

Nutzer sollen aber auch eigene Suchmaschinen, bzw. durchsuchbare Websites der Gallerie hinzufügen können.

Ab sofort können sich Nutzer bei Colorganize ganz einfach mit seinem Twitter-Account einloggen.
Es ist keine extra Registrierung nötig.

Klicke einfach auf den Button “Sign in with Twitter” und autorisiere Colorganize als Twitter-App.

Es ist geplant, weitere Login-Möglichkeiten einzubringen (Facebook, Google etc.).

Teste es gleich aus: colorganize.com

Der Farb-Picker ist zurück!

Seit dem Redesign fehlte der bisher enthaltene Farb-Picker. Dieser ist nun wieder da.
Klicke im Farb-Modal einfach auf das Tropfen-Symbol und er erscheint.

Ideen für die Zukunft

Neben der Möglichkeit, sich mit verschiedenen Diensten einzuloggen, wünsche ich mir, dass Farbpaletten geteilt werden können.
Nutzer können von einer ihrer Paletten eine URL erhalten, die sie dann weitergeben können. Die Empfänger müssen nicht bei Colorganize eingeloggt sein.

Ebenfalls wäre es nett, wenn Nutzer ihre Paletten auf eigenen Projekt-Seiten einbetten könnten.

Mal sehen, inwiefern ich es schaffe, diese Ideen umzusetzen… ^^