Bootstrap Studio

Einige von euch werden sicherlich Twitter Bootstrap kennen. Es ist eine der bekanntesten HTML, CSS und JS Frameworks für responsive Webentwicklung. Bootstrap vereinfacht einiges, doch mit Bootstrap Studio wird das alles noch einfacher! Mit dem WYSIWYG (What You See Is What You Get) Editor lassen sich Webseiten mit wenigen Klicks einfach zusammenstellen. Doch wie viel kann Bootstrap Studio? Und erlaubt es einem auch Freiräume um aus dem Standard Bootstrap Design herauszustechen?

Bildschirmfoto 2016-02-25 um 20.02.30.png Weiterlesen

Principle

Seit ein paar Wochen gibt es eine neue Prototyping App für den Mac. Principle ist nicht das erste Tool zum erstellen von interaktiven Prototypen, aber es macht einen guten ersten Eindruck. Doch was ist mit Principle alles möglich und stimmt der erste gute Eindruck?Principle Weiterlesen

xScope 4

Nach nun mehr als 2 Jahren geht die Iconfactory mit einer brandneuen Version von xScope in die nächste Runde des Design-Tools. Mit mehr als 80 neuen Funktionen und Verbesserungen wird viel versprochen. Ob xScope 4 wirklich ein next generation Tool für Designer und Entwickler ist erfahrt ihr im Review.

Bildschirmfoto 2014-06-26 um 10.21.52 Weiterlesen

PaintCode 2

PaintCode ist ein durchaus bekanntes Design Tool für die App Entwicklung. Es generiert aus gezeichneten Formen, Linien und Text Code zum einbinden in iOS oder Mac Apps. Nun gehen die Entwickler in die 2. Runde und haben einige Neuheiten für das neue PaintCode 2 an Bord.

Review Test Weiterlesen

Prototypes – teste deine iPhone App Mock-Ups direkt auf dem iPhone

iPhone und iPad Apps gibt es ja mittlerweile wie Sand am Meer und das erstaunliche ist, dass Täglich wieder mehr dazu kommen. Ja und als Programmierer möchte man, vorausgesetzt man erstellt überhaupt ein Mock-Up und klöppelt nicht gleich los, sein App in der Mock-Up Phase gerne mal auf dem iPhone testen. Das ging bisher nicht wirklich. Man konnte zwar seine Mock-Ups über iPhoto auf das iDevice spielen und in Fotos sich alles schön anschauen. Doch mit Prototypes kann man endlich funktionsfähige Mock-Ups oder besser Prototypen erstellen und sie natürlich auf auf dem iPhone Testen.

Prototypes nutzt beim erstellen der Prototypen eine spezielle, aber sicherlich auch praktische Variante. Man bastelt sich nämlich seinen Prototyp nicht mit einzelnen Buttons und andern Elementen, sondern man setzt die Benutzeroberfläche als Hintergrundbild und legt oben drüber transparente Linkflächen. Mit diesen Linkflächen leitet man den Benutzer des Prototypen auf eine gewählte Seite. Dabei kann man verschiedene Übergänge nutzen. Das war es auch schon vom Prinzip. Einfach mehrere Seiten erstellen, mit der jeweiligen Benutzeroberfläche und untereinander verlinken – Fertig.
Ist man mit dem Prototyp fertig, kann man ihn noch im App testen und anschließend über den Prototypes Server hochladen und auf dem iPhone testen – fertig ist der funktionsfähige Prototyp.

Prototypes unterstützt zwar derweil nur das iPhone, ja auch in retina, ist dennoch sehr gelungen und eine echte Empfehlung, besonders für Screendesigner!

PS: Ich hab für euch den im Video Review verwendeten Prototyp hochgeladen. Dieser ist aber nur für die nächsten 30 Tage aktiv, also beeilt euch 🙂

Geht einfach auf ptyp.es und folgt der einfachen Anleitung. Ach ihr braucht noch diesen PIN: 4780 3346

PREIS:
31,99€

ENTWICKLER:
Duncan Wilcox

SYSTEMVORAUSSETZUNGEN:
Mac OS X 10.6 oder neuer

MAC APP STORE LINK

xScope – mehr als nur ein Lineal auf deinem Mac!

Developer kennen das Problem der begrenzten Bildschirmgröße und wenn diese dann noch von Benutzer zu Benutzer verschieden groß sind wird das ganze komplizierter. Damit das Design perfekt passt und harmoniert, auch auf unterschiedlichen Bildschirmgrößen, kommt es des öftesten mal vor das man die Benutzeroberfläche vermessen muss. Nun stellt sich die Frage wie man dies tut. Es gibt sicherlich ein paar Primitive Varianten und diese sind auch nicht zwangsläufig ungenau, aber meist unhandlich und kompliziert. Mit xScope löst sich zumindest das Problem des vermessens in Luft auf.

xScope ist ein umfangreiches und professionelles Vermessungswerkzeug für den Mac. Mit den sechs Vermessungstools gibt es kein Objekt oder Bereich welcher nicht vermessen werden kann. Die sechs Tools sind sehr verschieden und haben im wesentlichen nur ein gemeinsames Merkmal, Pixel vermessen. Dabei lassen sie sich in verschiedenster Art und Weise kombinieren.

DIMENSIONS
Das „Dimensions“-Tool wird der Mauszeiger als Messmittelpunkt gesehen. Von diesem Punkt misst xScope den Abstand zum nächsten Objekt auf dem Bildschirm. Dabei ist xScope intelligent, denn es erkennt die einzelnen Bestandteile der Benutzeroberfläche des Macs bzw. der Webseite und vermisst z.B. bei einer Textbox auf einer Webseite nicht den vom HTML Code definierten Bereich der Box, sondern misst bis an den Text heran (siehe Screenshot). Wenn gewünscht kann auch die Textbox im Ganzen als Element erkannt werden und somit wird die Angrenzung der Box und nicht der Inhalt als Messpunkt gesehen. (Die Funktion ist recht schwer in Worte zu fassen, also schaut euch am besten das Video an)


RULERS
Dieses Tool zeigt, wie der Name schon verrät, ein Lineal, welches in der Länge verstellbar ist und rotiert werden kann. Wahlweise kann man sich ein zweites Lineal einblenden Lassen welches sich im rechten Winkel zum anderen platziert. Somit lässt sich einfach und schnell auf zwei Achsen messen.

SCREENS
„Screens“ zeigt dir einen fest definierten Bereich von verschieden Bildschirmgrößen an. Eine große Auswahl an Flächen gibt es bereits in den Einstellungen wie zum Beispiel iPhone. Es besteht aber auch die Möglichkeit eigene hinzuzufügen. Somit kann man testen ob z.B. die Benutzeroberfläche auf ein 13″ MacBook Pro passen würde.
Das besondere am „Screens“-Tool ist, das man sich für die verschiedenen Browser auf Mac und PC die nutzbare Fläche berechnen lassen kann.

LOUPE
Der Name sagt eigentlich schon fast alles. Mit der „Loupe“ wird ein kleiner Bereich um ein vielfaches Vergrößert. Auch hier gibt es allerlei Einstellungen wie z.B. den Zoomfaktor. Ein sehr wichtiges extra der „Loupe“ ist das die Farbe der Pixel in verschiedenen Farbcodes ausgegeben werden lassen kann.

GUIDES
Mit den „Guides“ unterteilt man seinen Bildschirm mit Horizontalen und Vertikalen Linien. Auch hier werden die Abstände der Linien gemessen und man kann sich sein eigenes Raster basteln.

FRAMES
Mit diesem Tool wird ein Rechteck angezeigt, wessen Größe manuell verstellbar ist. Man kann sich auch mehrere „Frames“ einblenden lassen und diese unterschiedlich in der Größe verändern.

CROSSHAIR
Das „Crosshair“ ist, finde ich persönlich, das am wenig interessanteste Tool. Es zeigt ausschließlich von der Position der Maus in horizontaler und vertikaler Richtung jeweils eine Linie und gibt die Koordinaten des Mittelpunktes aus. Der Ursprung ist standartmäßig die linke obere ecke des Bildschirmes. Mehr kann das „Crosshair“ leider nicht, aber in Kombination mit den anderen Tools ist es sicherlich für den ein oder anderen Nützlich.

Zusammenfassend kann ich nur sagen: xScope ist ein super Praktisches Tool für Web- und Screendesigner! Es ist für sagenhafte 24€ im Mac App Store erhältlich, jedoch bekommt man für den Preis auch ein sagenhaftes Toolpacket.

PREIS:
23,99€

ENTWICKLER:
The Iconfactory

SYSTEMVORAUSSETZUNGEN:
Mac OS X 10.6.6 oder neuer

MAC APP STORE LINK