Fabian Schultz

Translating Anchor

Wed, 08 Aug 2012 00:03:00 +0200

Since the first time I heard about Open Source stuff, I wanted to contribute to one or more projects. I think it is a great thing, with a lot of future. People help people – for free, and just because they want to. I am not the greatest coder, so I decided to do something else (which still can be considered as helping an open source project).

I’ll translate the homepage of Anchor CMS into the german language. The software by itself is already translated and I “just” translate website. I am about to finish the Docs page, and it is actually pretty fun. It is a great practice translating the texts from @idiot, because he uses a lot of expressions that are quite hard to translate.

It is really great to help the german Anchor community and get more people to use this awesome CMS. If somebody wants to help me a little out, shoot me a mail (or tweet me). Furthermore, I work on some real nice projects also, so be sure to follow me on twitter and on dribbble.

Freebies

Sat, 04 Aug 2012 23:16:55 +0200

Freebies are great. To be honest, I guess I’ve never really used a freebie (except for icon sets). Furthermore, I have no idea who uses them, but apparently a lot of people, and thats why I make them (and, I think, all the other “designers” too). In my opinion, it is awesome to see how other people use the stuff you made, tweak it a bit and make it to something completely different.

The most of the time I spent thinking about what I should create. A very important question you have to ask yourself is “Does anyone even need that?”. I mean, sharing some login forms or setting modals isn’t very efficient, is it? Of course, they look good, but if you create a whole product/website you can make that by yourself, right? Something that matches together with the general UI. I hope you get my point there.

Freebies have to be individual and original. At least I think so.

Carri

Sat, 04 Aug 2012 14:43:57 +0200

Some of you will probably know that I released a project a couple of months ago. It is called Carri and is a simple alternative to mailto links. It was my first real project and I designed & coded it by myself in three days. Around 200 people registered for Carri (thanks again to @idiot) and I am actually pretty satisfied with it. I just made it for the fun and the experience, so I really haven’t had any expectations of Carri.

I am planning to either redesign - or completely rewrite it, mostly because mailto turns out to be not that bad. If you click on it, either Mail or Gmail opens, but I didn’t really know that by the time I made it (yeah, I used Windows).

I probably should include something like a embedding-function, maybe for people who do not have the time (or the skills) to create their own contact forms. Of course, in a minimal (and real good looking) way.

I also would love to hear your suggestions, so if you have any ideas, just drop me a mail or (which would be even better) send me a tweet.

Motivation

Tue, 31 Jul 2012 14:11:00 +0200

If I really want to work on something, no matter if small or big, I need Motivation and, of course, Inspiration. One thing (that you all will probably know) is music. Everybody has their own favorite genre and maybe even a favorite volume setting. Even when I am alone at home I do not listen with my speakers, but need my urbanears; and a few of my favorite tracks. I often use my rdio playlist for that, or I take a look at 8tracks.com - where you can find handcrafted playlists ordered by the genre. When I am listening I can better concentrate on what I am doing, and almost never get distracted.

Another great help - personally for me - is Red Bull. You may like coffee or other energy drinks, but I just prefer this one. After a few minutes I just feel better and it contributes to my concentration. Maybe it is just a placebo effect, who knows?

Everybody has their own things that pushes themselves. I’d love to hear from you, just drop me a mail. Maybe I’ll activate comments here, we will see.

armadillo

Mon, 16 Jul 2012 17:47:00 +0200

Vor ein paar Tagen habe ich mich entschlossen nicht mehr “nur” unter meinem Namen zu arbeiten, sondern ein Art Design Studio zu gründen. Das hat meiner Meinung nach mehr Potential.

Name: armadillo.

Englisch für “Gürteltier”. Nein, es hat keinerlei Bedeutung, ich wollte bloß etwas simples, ohne irgentwelche ausgeklügelten Fakten. Zugegeben, der Name ist mir beim Zocken “eingefallen” genauer gesagt als ich Red Dead Redemption gespielt hatte. Da war mir dieser Name schon ins Auge gefallen. Schnell noch ein Logo zusammengeschustert, Domain gekauft und einen Twitter Account erstellt. In der nächsten Zeit also bereit für viele Neue Designs machen, das wird gut ;)

armadillo auf Twitter
Homepage
Projekt auf Dribbble

I released a freebie today (on PixelBin). It is a blueprint...

Tue, 26 Jun 2012 15:37:17 +0200

I released a freebie today (on PixelBin). It is a blueprint Template that you can use for almost everything, so have fun with it!

Safari: Aktualisieren mit F5

Wed, 20 Jun 2012 14:28:00 +0200

Als ich das erste mal Safari so wirklich benutzt habe, musste ich leider feststellen dass das Aktualisieren einer Seite mit F5 nicht möglich ist. Dazu muss ich natürlich auch sagen, dass ich es von Windows gewöhnt bin, aber eine Tastenkombination wollte ich nicht benutzen, um einfach nur eine Seite zu aktualisieren. Eine Lösung habe ich mehr oder weniger schnell gefunden und teile das Wissen nun mit euch :)

Schritt: Öffnet die Systemeinstellungen und klickt auf die Tastatur.
Schritt: Danach klickt auf “Tastaturkurzbefehle” und danach auf “Programmkurzbefehle”.
Schritt: Klickt nun auf das kleine + und gebt die folgenden Daten ein. (Ob Ihr alle Programme oder nur Safari auswählt ist egal)
Schritt: Nun auf Hinzufügen klicken und Ihr seid fertig.

Das wars auch schon, ich hoffe ich konnte weiterhelfen :)

Carri: Die beste Alternative zu mailto Links

Fri, 13 Apr 2012 00:51:00 +0200

Als ich vor ein paar Tagen mein Portfolio kurzfristig neu gestaltet habe, musste ich mal wieder auf die allbekannte mailto Variante zurückgreifen, die mir schon seit einiger Zeit auf die Nerven geht.

Heutzutage gibt es kaum noch Internetnutzer die ihre Mails mit Programmen wie Outlook etc. verwalten (Firmen ausgeschlossen). Jeder benutzt Online Services wie Hotmail, Google Mail, Yahoo und so weiter - mailto Links sind in diesen Fällen nutzlos.
Man müsste sich den kompletten Link kopieren, die Mailadresse rausscheiben und kann dann erst die Nachricht schreiben. Klar ist, dass dort viele potentielle Kunden aufgeben und dann eben verzichten.

Und genau dabei ist mir dann die Idee zu http://carri.me gekommen. Innerhalb kürzerster Zeit kann man sich das Formular erstellen, muss sich nicht mit der mail(); Funktion von PHP rumschlagen (um sein eigenes Formular zu erstellen) und kann ganz bequem auf sein persönliches Kontaktformular verlinken, welches sich auf http://carri.me befindet. Einfacher geht es nicht.

Carri.me ist abgeleitet von dem englischen Wort carry - ausliefern. Inspiriert wurde das Design von Orman Clark’s Snippi.com und wurde mit PHP & MySQL in ein paar Tagen realisiert.
Also worauf wartet ihr, erstellt euch schnell euer eigenes Formular auf http://carri.me !

Publish What You Learn: Transitions

Tue, 03 Apr 2012 23:23:00 +0200

Webdesign orientiert sich bekanntlich oft an der Natur, dem realen. Ein klares Beispiel sind da die Texturen: wir haben zwar die Chance makellose Hintergründe und Flächen zu erstellen, tuen es aber mit voller Absicht oft nicht. Warum? Es ist nicht real. Weitere Beispiele wären Stiches, Ribbons, Schatten und noch vieles mehr, wenn man mal genauer darüber nachdenkt.
Mit CSS3 kommt jetzt eine neue Verbesserung hinzu: Transitions - Übergänge. In diesem “Artikel” werde ich ein wenig über die Transitions informieren, und auch den Sinn & Zweck näher erläutern.

Warum überhaupt?
Wie schon gesagt, der Realismus spielt eine große Rolle, doch es gibt noch einige andere Gründe die Transitions zu einem zenralen Aspekt in gutem UI Design machen. Schauen wir uns mal die Übergänge beim iPhone an. Das sind wirklich mehr als man denkt, denn so gut wie alles ist dort animiert - und besitzt Transitions. Der Nutze davon ist wohl ziemlich klar: wir wissen wo wir uns gerade befinden, können genau zurückverfolgen wie viele Seiten wir gewechselt haben, und die ganze UI ist um einiges einfacher zu bedienen. In Zeitlupe wird das noch einfacher zu sehen.

Grundlegend ist es das auch schon; Transitions schaffen Übersichtlichkeit und Einsichtigkeit, und genau das ist auch das Ziel gutem UI und Webdesign.
Wie das ganze funktioniert zeige ich im Folgenden, auch wenn viele von euch wahrscheinlich schon wissen wie man es realisert, aber man lernt bekanntlich ja nie aus.

Einfache Transitions
Mit diesem Ausdruck meine ich voreingestellte Übergänge von Webkit ect. wie das Wechseln der Textfarbe oder des Background Images. Die CSS Eigenschaft besteht aus 3 verschiedenen Werten:

Die zu änderne CSS Eigenschaft:
Ob opacity, color, background-image oder box-shadow, hier wird deklariert welche Eigenschaft einen Übergang bekommt.
Das Zeit Intervall:
Hier kommt die Zeit hin die die Animation beanspruchen soll. Beispielwerte: 2s (2 Sekunden), .2 (2 Millisekunden), 0.21 (21 Millisekunden).
Timing und Delay:
Hier wird deklariert wie die Transition verläuft: linear - also ohne Veränderungen in der Geschwindigkeit; ease-in - die Animation wird immer schneller; ease-in-out - die Animation wird erst schneller, dann langsamer (ect.).

Kommen wir zu einem konkreten Beispiel:

a {
    color: blue;
    -webkit-transition: color .25s linear .1s;
    transition: color .25s linear;
}
a:hover {
    color: red;
    -webkit-transition: color .25s linear;
    transition: color .25s linear;
}

Was hier passiert ist wirklich simpel. Zuerst wird die Schriftfarbe bestimmt. Im normalen Zustand hier blau, im mouseover-Zustand rot. Funktionieren würde das soweit auch ohne das Hinzufügen von Transitions, darum geht es jetzt aber nicht.

Nachdem wir die grundlegenden Informationen für den Browser angelegt haben werden nun die Transitions eingefügt. Diese müssen nicht zwingend in beiden Aktionen (hover, normal) deklariert werden, das kann man so machen wie man will (auch die Werte müssen nicht unbedingt übereinstimmen). In unserem Beispiel ändert sich die Schriftfarbe im Zeitraum von 25 Millisekunden linear von blau zu rot. Das System ist hier wirklich simpel und einfach zu verstehen, deshalb ich werde nun mit fortgeschritteneren Transitions fortfahren. Wer sich dennoch mehr damit beschäftigen möchte empfehle ich einen Artikel bei webdesignerdepot.com. Des Weiteren könnt ihr das Beispiel hier live sehen.

Fortgeschrittene Transitions mithilfe von Keyframes

Ein wenig mehr Arbeit machen die fortgeschrittenen Transitions, die man eigentlich schon Animationen nennen sollte. Ich nehme dieses Thema auch in diesen Artikel rein, da es für mich in die selbe Kategorie gehört. Fangen wir zunächst mit einem einfachen Beispiel an, um das grundlegende Prinzip klar zu stellen.

@keyframes anim {
  50% {
    left: 225px;
    transform: rotate(30deg);
  }
  100% {
    top: 130px;
  }
}

Was hier geschieht ist mit einfachen Worten zu sagen: Durch die @keyframe Regel wird eine neue Animation erstellt, hier mit dem Namen ‘anim’. In unserem Fall werden 2 Keyframes gesetzt:

Bei 50% - also wenn die Animation zur Hälfte abgelaufen ist
und bei 100% - wenn die Animation zum Ende kommt.

Nun können wir die Animation mithilfe der Eigenschaft ‘animation’ auslösen.

  #div {
    width: 50px;
    height: 50px;
    background: #000;
    animation: anim 2s;
  }

Im Prinzip ist es das auch schon, klar ist aber auch dass man damit mehr als nur ein paar einfache Animationen machen kann, da gibt es weitaus mehr Möglichkeiten. Außerdem muss man an die Browser-Kompatibilität denken. Transitions funktionieren in allen modernen Browsern, der Internet Explorer wird wohl mit der zehnten Version mitziehen.

Das ganze Beispiel habe ich auf dabblet.com gestellt und ich werde wohl demnächst einen Artikel uber noch-fortgeschrittenere Animationen schreiben, also folgt mir am besten auf Twitter & co.

Publish What You Learn: Adobe Shadow

Mon, 02 Apr 2012 04:02:00 +0200

Vor ein paar Tagen habe ich einen Artikel bei Smashing Magazine mit dem Titel “Publish What You Learn” gelesen. Ich hab mich jetzt dazu entschlossen das auch manchmal zu machen und fange hiermit mal an etwas über Adobe Shadow zu schreiben, eine wunderbare App für Webdesigner & Co. die sich öfters mit mobilem Design beschäftigen.

Benutzung - Was ist Adobe Shadow?
Nachdem man sich die App sowohl für PC (oder Mac) und sein iPhone heruntergeladen hat fehlt nur noch ein Schritt damit das ganze funktioniert: Eine Browser Erweiterung. Da ich persönlich Google Chrome verwende habe ich mir die Extension in ein paar Sekunden installiert und schon konnte es los gehen. Adobe Shadow funktioniert dann praktisch wie eine Cloud: sie ließt die URL im aktuellen Tab am PC aus und gleicht sie mit dem iPhone ab. Ihr geht also in Chrome auf google.com und wenige Momente seid ihr das auch auf dem iPhone. Das Ganze erspart viel Arbeit und ist nur zu empfehlen.

Nachteil
Was ein wirklich klarer Nachteil ist, ist dass man keine lokalen Seiten aufrufen kann, d.h. dass lediglich die URL und nicht der Quelltext ect. abgeglichen wird. Um effektiver mit Adobe Shadow arbeiten zu können, müsste man direkt in einer Cloud arbeiten - da ist Dropbox nur zu empfehlen.

Fazit
Die Idee ist wirklich sehr gut, wurde aber eher ungünstig umgesetzt. Ich gehe mal stark davon aus dass die meisten Designer offline bzw. auf dem localhost arbeiten, alles andere ist meist umständlich. Da die Software im Adobe Lab angeboten wird, kann man wohl annehmen dass die Software noch in der Entwicklung ist und noch viele Erweiterungen kommen werden. Auf jeden Fall sollte man sich das mal genauer anschauen und sich ein eigenes Bild machen, ich würde mich über Rückmeldungen freuen.

Die App ist sowohl für das iPad als auch für das iPhone verfügbar. In Zukunft wären eine lokale Einbindung ~~und mehr Devices (Android, Kindle)~~ (das nehme ich zurück) wohl die wichtigsten Verbesseungen. Ich habe außerdem gelesen dass der localhost mithilfe der IP Adresse erreichbar ist, das werde demnächst mal ausprobieren, und euch wissen lassen ob es funktioniert.

EDIT: Die localhost Funktion ist jetzt auch dazu gekommen und kann ohne Einschränkungen oder Kritik die App weiterempfehlen! Ein MUSS für jeden Web Designer!

Link zum Arikel auf Smashing Magazine
Available on the App store

Ja, wie ihr sehen könnt habe ich mein eigenes Tumblr theme...

Fri, 16 Mar 2012 17:43:24 +0100

Ja, wie ihr sehen könnt habe ich mein eigenes Tumblr theme geschaffen, natürlich könnt ihr euch es hier herunterladen: Way of life - Tumblr Theme by Fabian Schultz

Dabblet - best HTML editor ever, promise!

Sat, 03 Mar 2012 06:16:27 +0100

Dabblet - best HTML editor ever, promise!:

Wow, I searched days and days for an editor like this: HTML, CSS, instant. Check it out!

The reminder in Siri as PSD, you can change everything, promise...

Fri, 24 Feb 2012 06:12:30 +0100

The reminder in Siri as PSD, you can change everything, promise ;)

You can grab it here!

Use it wherever you want, it’s completely free! (You can check the checkbox if you want)

Im Moment vertreibe ich mir ein wenig die Zeit mit Rebounds bzw....

Wed, 22 Feb 2012 04:18:56 +0100

Im Moment vertreibe ich mir ein wenig die Zeit mit Rebounds bzw. Playoffs und einem Template für eine neue App (WIP), welches hier schwer erkennen könnt ;D!

At the moment I pass my time with Playoffs on Dribbble and a template for a new app (WIP), which you can see below!

Update: Faster!

Sun, 19 Feb 2012 04:56:28 +0100

Okay, it was a really tough decision, I thought hours about it, but it is my first giveaway and here are the winners!

Tim Grochowski (http://tim-grochowski-portfolio.tumblr.com) @ti_gr
Hector Carranza (http://www.behance.net/hectorcarranza) @neral

Why I made the decision today? Well, maybe some of you know that I’m currently in the USA as an exchange student and I really don’t have much time here, so I just announced the winners today.

I hope and I don’t think that it was a bad idea, especially not the winners! You are all really good, but I just have 2 invites for now!

Have fun Tim & Hector, make me proud ;) ! Next giveaway will come soon, stay tuned!

Fabian

Two Dribbble Invites Giveaway!

Fri, 17 Feb 2012 02:23:00 +0100

Dribbble is show and tell for designers. Players share shots—small screenshots of the designs and applications they are working on.

…and guess what, I have 2 dribbble invites for you!

All you have to do is follow these steps:

Follow me on dribbble & twitter!
Simply retweet this tweet!
Mail your application with an example of your work & a link to your portfolio!

I will announce my choices on ~~February 25, 2012~~ February 18, 2012 via Twitter!

Good luck to everyone!

Fabian

Extrem gelungene Rede, echt großartig!

Wed, 15 Feb 2012 23:18:33 +0100

Extrem gelungene Rede, echt großartig!

Könnte ein Teil einer App werden, hoffe ich!

Sun, 05 Feb 2012 04:57:21 +0100

Könnte ein Teil einer App werden, hoffe ich!

Lake Michigan (Taken with instagram)

Sat, 28 Jan 2012 01:26:00 +0100

Lake Michigan (Taken with instagram)

Sagt alles ;) http://drbl.in/cKFt

Wed, 11 Jan 2012 14:07:00 +0100

Sagt alles ;) http://drbl.in/cKFt