Arndt Dibi

So funktioniert modernes CSS, hier findet ihr iOS-10-Design-Kits und viele nützliche, kostenlose Tools.

Damit ihr auch in diesem Monat bestens auf eure Projekte vorbereitet seid, haben wir eine Liste mit verschiedenen Goodies für Designer und Entwickler erstellt.

Wie immer ist alles auf der Liste kostenlos und mit nur wenigen Klicks einsatzbereit. Ob Anfänger oder Fortgeschrittener: Hier ist für jeden was dabei.

Lesenswert

Modernes CSS

Auf tutorialzine findest du 20 hilfreiche und von der CSS-Community ausgewählte Tipps, die das Coden mit CSS einfacher machen sollen – für Anfänger und erfahrene Coder. Jeder Tipp wird ausführlich inklusive Code-Beispiel erklärt. Unter den 20 Tipps findest du Beispiele für Flexbox, Background-Images, CSS-Reset und viele weitere.

15 inspirierende UX/UI Designer

Von den Großen lernen und inspirieren lassen: Berry Sarah hat auf Mockplus eine Liste von 15 Designern zusammengestellt, denen du auf Twitter oder ähnlichen Kanälen folgen solltest. Unter den 15 UX- und UI-Designern sind etwa Luke Wroblewski, Designer bei Yahoo, und Joshua Porter, UX-Designer bei Hubspot.

Styleguide: So geht's richtig

Styleguides verraten uns, wie eine Marke optisch nach außen tritt und wie wir mit ihr umgehen. Alles was du über die Erstellung eines Styleguides wissen solltest erklärt Mybridge Design in seinem Artikel.

CSS-Wunder

Der Artikel zeigt Animationen und Projekte, von denen man mit CSS2 nur hätte träumen können. Seit CSS3 ist die Umsetzung von Animation ohne JavaScript oder Flash leichter denn je. Hier findest du beeindruckende Projekte inklusive Code zum Inspirieren.

Tools

Vectr

Vectr ist ein kostenloses Vektorgrafik-Tool, das sowohl lokal auf Mac, Windows, Linux und Chromebook als auch als Webapp genutzt werden kann. Die Funktionen und das Interface sind in beiden Versionen identisch. Am 13. September hat Vectr die Beta-Phase verlassen und die Entwicklung soll vorerst ausgereift sein. Das Interface erinnert an Illustrator in vereinfachter Version.

Stocky

Ob für kommerzielle oder persönliche Zwecke, auf Stocky findest du kostenlose Stock-Fotos, Videos Grafiken und Musik, die du in jedem deiner Projekte verwenden kannst. Und falls das Gewünschte nicht dabei sein sollte, kannst du Stocky jederzeit eine Anfrage schicken.

Adioma

Mit Adioma kannst du schnell und unkompliziert Infografiken, Timelines, Organigramme und vieles mehr erstellen. Mit vordefinierten Icons, Templates und Strukturen wird dein textlastiger Content in kürzester Zeit zu einer anschaulichen Infografik.

UIDB

UIDB steht für User Interface Database, eine Website, die dir Inspiration zu User-Interface- und User-Experience-Beispielen zeigt. Dich erwartet eine übersichtliche und selbsterklärende Benutzeroberfläche. Über die vorgefertigten Tabs, Filter oder über die Suche gelangst du zu den UI-Beispielen.

Timely

Timely ist eine automatische Timetracking-App für Freelancer oder Teams. Mit Timley kannst du all deine Apps in einer App vereinen und organisieren. Nutzen kannst du Timely auf deinem iPhone, Macbook, iPad, iWatch und natürlich im Browser. Android soll demnächst auch unterstützt werden.

Farbpaletten

Webfarben stehen für grenzenlose Kombinationsmöglichkeiten. Allerdings kann die Vielfalt an Farben auch zur Herausforderung werden, eine perfekte Farbpalette oder -kombination zu finden. Bei solchen Problemen kann dir dieser Artikel helfen. Wir haben sieben ausgewählte Tools und Websites herausgesucht, mit denen du dir deine Farben individuell zusammenstellen kannst.

Freebies

iOS-10-Kit

Die offizielle Version von iOS10 ist live und somit auch neue Guidelines für alle iOS-Designs. Das Kit enthält 63 Screens für jede Komponente, vom Homescreen bis zu kleinen Detailanforderungen. Es ist kostenlos für Photoshop, Sketch und Craft erhältlich.

Citysets

London, Paris, New York und Sydney, für diese Städte findest du jeweils zwischen 19 und 21 typische Icons auf citysety.co.uk. In jeder Kategorie sind die entsprechenden Wahrzeichen enthalten. In dem Paris-Kit findest du natürlich ein Croissant, ein Baguette und den Eiffelturm. Die jeweiligen Sets sind als Illustrator-, Sketch- oder SVG-Datei kostenlos erhältlich.

Designer Emojis

Designer Emoji ist ein aus 45 Vector-Dateien bestehendes Set, die den Alltag und die Person eines Designers wiederspiegeln sollen. Das Set steht kostenlos auf designcue.co zum Download bereit. Unter den 45 Vectoren findest du Designer-Emojis, Hardware-Emojis und Symbole für die Arbeit eines Designers.

Checkout Pages

Eine schnelle Kaufabwicklung ist das A und O beim Online-Shopping. Doch oft hapert es am Design und an technischen Anforderungen. Wie es richtig gemacht wird, zeigt die Website checkoutpages.xyz. Sie zeigt und veröffentlicht die besten Checkoutseiten als Vorzeige-Beispiele. Außerdem findest du auch ausgewählte Pricing-, Store- und Produktpages auf der Website.

Halloween Icons

Am 31.Oktober ist Halloween und damit du vorbereitet bist, hat Justyna Stastik auf Behance eine kostenlose Icon-Sammlung für deine Einladungskarten, Plakate oder anderen Projekte online gestellt. Falls du mehr Inspiration benötigst, kannst du dich von sehenswerten Halloween-Designs auf Behance inspirieren lassen.

Fonts

Banaue

Banaue ist eine herbstliche Handwritten-Font für den „Homemade-Look“. Die Font hat 104 Schriftzeichen, enthält alle Basic-Glyphen und wird als .otf-Datei geladen. Designt wurde die Schrift von Ieva Mezule.

Portico

Eine ebenfalls herbstliche Font ist Portico. Die kostenlose Font soll laut dem Designer so vielfältig wie möglich sein. Und das ist gelungen: Ob für persönliche Applikationen, für Grunge- oder Vintage-Designs, die Schrift lässt sich vielseitig einsetzten.

Phalanx

Halloween steht vor der Tür und dir fehlt noch die richtige Font für deine Einladung? Dann ist Phalanx vielleicht die richtige. Eine Vintage-Font, inspiriert von den frühen 1900er Jahren. Die Schrift enthält das Alphabet und Zahlen von 0 bis 9.

Du hast Fonts, News, Freebies oder Tools, die im nächsten Monat hier stehen sollten? Dann schreibe sie in die Kommentare oder mir direkt auf Twitter.

Microsoft hat in München-Schwabing seine neue Deutschland-Zentrale eröffnet. Das Bürogebäude soll am 11. Oktober offiziell eröffnet werden. Motto: „Neue Welt des Arbeitens“.

Microsoft: Bürokonzept mit offenen Strukturen

Microsoft wird am 11. Oktober seine neue Deutschland-Zentrale in München-Schwabing eröffnen. In dem Gebäude setzt der Softwarekonzern auf ein Bürokonzept der offenen Strukturen. Statt fester Arbeitsplätze sucht sich jeder Mitarbeiter an jedem Morgen einen neuen Platz zum Arbeiten. Dazu gehört natürlich auch, dass der Schreibtisch nach Arbeitsschluss leergeräumt werden muss. Persönliche Gegenstände und technische Geräte können in Schließfächern verwahrt werden.

Das Microsoft-Gebäude hat sieben Etagen und elf Dachterrassen und eine Fläche von rund 26.000 Quadratmetern. Im Erdgeschoss, das für Besucher zugänglich ist, findet sich ein Café, in dem man auch die neuen Microsoft-Produkte ausprobieren kann. Insgesamt gibt es 1.100 Arbeitsplätze in dem neuen Gebäude. Die Zahl der Mitarbeiter liegt deutlich darüber. Microsoft geht aber davon aus, dass zwei Drittel der Mitarbeiter regelmäßig woanders arbeiten, etwa beim Kunden oder im Homeoffice.

1 von 9

Zur Galerie

Eine Registrierung der Arbeitszeit soll es nicht geben, die Mitarbeiter sollen einfach schaffen, was sie schaffen sollen. Microsoft nennt das Work-Life-Flow. „In der neuen, digitalen Arbeitswelt ist alles ,im Fluss‘. Es gibt keine starren Grenzen mehr, weder zwischen Teams oder einzelnen Abteilungen noch zwischen Hierarchie-Ebenen“, erklärt Markus Köhler, Senior Director Human Resources und Mitglied der Geschäftsleitung von Microsoft Deutschland in einem Blogbeitrag.

Konzept von Microsoft und Fraunhofer-Institut

Kreative Wissensarbeiter, meint Köhler, würden nicht mehr zwischen Arbeit und Privatleben unterscheiden, „sondern ihr Leben ganzheitlich, individuell und flexibel gestalten“. Das Konzept hat Microsoft gemeinsam mit dem Fraunhofer-Institut für Arbeitswirtschaft und Organisation entwickelt. Mitarbeiter sollen etwa im sogenannten „Think Space“ konzentriert allein arbeiten, oder im „Share and Discuss Space“ die Gedanken austauschen.

Auch interessant in diesem Zusammenhang: Zu Besuch bei Github: So ein Büro wünscht sich jeder

via www.manager-magazin.de

Der Google Webfonts Helper ist ein kostenloser Service, der dir dabei hilft, Google Fonts unkompliziert auf deinem eigenen Webspace zu hosten. Das geht ganz einfach.

Google Webfonts Helper: Kostenloses Tool unter MIT-Lizenz

Der Google Webfonts Helper ist ein Tool des österreichischen Entwicklers Mario Ranftl und steht zur kostenlosen Verwendung unter der MIT-Lizenz auf Github bereit. Der Helper will dich dabei unterstützen, Google Fonts auf deinem eigenen Webspace zu hosten. Dazu erzeugt er die erforderlichen CSS-Snippets und verpackt dir alle erforderlichen Dateiformate einer Schriftart in ein Zip-Archiv, das du dann herunterladen kannst.

Der Google Webfonts Helper ist in sich ebenso frei und kann also generell auch selber gehostet werden. Um lediglich seinen Zweck zu erfüllen, ist das indes nicht erforderlich. Vielmehr stellt Mario Ranftl die App als voll funktionsfähigen Web-Service zur Verfügung. Entwickler können sich zudem entscheiden, die öffentliche API des Dienstes direkt anzusprechen.

Google Webfonts Helper stellt dir ein Komplettpaket bereit

Heute will ich mich auf die Verwendung der Web-App beschränken. Hier startest du mit der Auswahl einer Schriftart, die du per simplem Klick auf den Fontnamen aktivierst. Wenn du möchtest, filterst du zuvor die Ergebnisanzeige nach verschiedenen Kriterien, etwa nach Popularität oder nach Schriftfamilie oder der Anzahl der verfügbaren Stile.

Unmittelbar nach der Auswahl füllen die Konfigurationsoptionen des jeweiligen Font den rechten Teil des Browserfensters. Hier kannst du auswählen, welche Zeichensätze in den Download integriert werden sollen. Weiterhin bestimmst du, welche Varianten du verwenden willst. Beachte, dass nicht jede Schrift mehrere Zeichensätze oder Varianten anbietet. Wundere dich also nicht, wenn du keine Alternativen siehst, die du anklicken könntest.

Auf der Basis deiner Selektion erstellt der Webfonts Helper nun das erforderliche CSS mit dem breitesten Browsersupport. Bist du sicher, dass dein Projekt nur über die modernsten Browservarianten aufgerufen werden wird, kannst du ein optimiertes CSS erzeugen lassen. Um das CSS nicht im Nachhinein nochmal anfassen zu müssen, änderst du unterhalb des Snippetfeldes bei Bedarf noch den Ordnernamen, den du in deinem Projekt verwendest. So erhältst du gleich korrekte Pfadangaben.

Hast du alles nach deinen Wünschen angepasst, lädst du das Zip-Archiv herunter, das dankenswerterweise ebenso benannt ist, wie der Font nebst Zeichensatz. Einmal auf deiner Festplatte angekommen, extrahierst du die Dateien aus dem Zip und lädst sie in deinen Font-Ordner hoch. Den auskopierten CSS-Schnipsel fügst du als einzelne Datei oder in eine vorhandene ein.

Mehrere Schriften kann der Webfonts Helper nicht kombinieren. Es spricht jedoch nichts dagegen, den eben beschriebenen Prozess beliebig oft zu wiederholen. Am Ende hast du dann alle gewünschten Fonts auf der Platte. Die Snippets kannst du einfach untereinander einfügen.

Der Bundestag hat einem Gesetzentwurf der Regierung zugestimmt, nach dem Fahrassistenzsysteme rechtssicher genutzt werden können. Voraussetzung ist aber, dass der Fahrer jederzeit eingreifen kann.

Bundestag entscheidet über Fahrassistenzsysteme

Ein neues Gesetz soll Rechtssicherheit für Fahrassistenzsysteme schaffen. Am gestrigen Donnerstag, den 29. September 2016, hat der Bundestag für ein entsprechendes Gesetzesvorhaben der Bundesregierung gestimmt. Fahrassistenzsysteme sind demnach zulässig, wenn sie den Vorgaben der Wirtschaftskommission der Vereinten Nationen für Europa entsprechen. Das bedeutet, dass der Fahrer jederzeit die Kontrolle über den Wagen übernehmen kann.

Die Novelle soll vor allem einen klaren Rechtsrahmen für die bereits im Einsatz befindlichen Fahrassistenzsysteme schaffen. Sprecher der Linken kritisierten, dass der Gesetzentwurf noch viele Fragen offen ließe. So seien viele Formulierungen zu vage und es sei beispielsweise unklar, wie genau ein Fahrzeug protokollieren soll, ob der Fahrer oder der Bordcomputer einen PKW gesteuert hat. Auch die Grünen verwiesen darauf, dass es im Bezug auf das automatisierte Fahren noch viele offene Punkte gebe.

Autonome Fahrzeuge: Neue Ethikkommission nimmt Arbeit auf

Ab heute, den 30. September 2016, soll sich eine neugegründete Ethikkommission mit der Thematik vollständig autonomer Fahrzeuge beschäftigen. Unter der Leitung des ehemaligen Verfassungsrichters Udo di Fabio soll sie den rechtlichen Rahmen dafür abstecken, wie sich autonome Fahrzeuge in Gefahrensituationen verhalten sollen. So sollen die Weichen für autonome Fahrzeuge im deutschen Straßenverkehr gestellt werden.

Ebenfalls interessant: Autonomes Fahren: Die Assistenz-Systeme von Tesla und BMW im t3n-Test.

via www.heise.de