Design ist ein komplexes Biest, Webdesign doppelt. Es gibt viel mehr als nur visuelle Harmonie und Ausgewogenheit. Es ist oft der Fall, dass Sie sich etwas einfallen lassen müssen und etwas Mathematik aus dem wirklichen Leben (keuchen!) Benötigen.
Seltsamerweise denke ich so gerne darüber nach, dass ich eigentlich meine eigenen Taschenrechner baue, anstatt die Tools anderer Entwickler zu verwenden. Heute zeige ich Ihnen, wie und warum Sie Ihre eigenen Design-Rechner erstellen, um die Zahlen hinter Ihren Designs zu beherrschen.
Treffen Sie Instacalc
Ich habe Instacalc schon einmal oder zweimal auf Design Shack erwähnt. Es ist überhaupt kein Entwurfswerkzeug, sondern ein nerdiger mathematischer Spielplatz. Warum mag ich es auf der Welt so sehr?
Instacalc ist das perfekte Produkt, das sich irgendwo zwischen einem normalen Rechner und einer Kalkulationstabelle befindet. Es ist viel leistungsfähiger als ein Taschenrechner und nicht ganz so komplex wie eine Kalkulationstabelle.
Wie es funktioniert
Wenn Sie Instacalc laden, sehen Sie eine Reihe von Feldern. Hier fügen Sie Ihre Berechnungen ein. Geben Sie einfach ein Problem ein, um die Lösung sofort nach rechts zu sehen.
Diese Felder können viel mehr als nur einfache Formeln verarbeiten. Sie können sich frei entscheiden, wie komplex Sie sind. Instacalc erledigt alles, was Sie darauf werfen, mit Leichtigkeit.
Die wahre Stärke von Instacalc liegt jedoch in der Fähigkeit, auf andere Zeilen zu verweisen, um auf früheren Berechnungen aufzubauen. Zum Beispiel nehmen wir hier eine Berechnung in R1 vor und verwenden dann die Lösung dieser Berechnung, um in R2 etwas noch komplexeres zu erreichen.
Sie können nicht nur direkt auf andere Zeilen verweisen, sondern auch Variablen in jeder Zeile einrichten und diese dann für die restlichen Berechnungen verwenden. Hier ist ein Beispiel:
Instacalc verarbeitet auch Text sehr gut. Wenn Sie Text einfach nach einer Zahl werfen, wird dies ignoriert und steht der Berechnung nicht im Weg. Wenn Sie etwas mit? //? Voranstellen, wird dieser Text zum Endergebnis übertragen und als Kommentar hinter die Lösung eingefügt.
Schließlich können Sie jeden von Ihnen erstellten Rechner benennen, speichern und freigeben. Dies macht Instacalc zu einem leistungsfähigen Werkzeug zum Erstellen wiederverwendbarer benutzerdefinierter Taschenrechner, auf die immer wieder von Ihnen und anderen verwiesen werden kann.
Wen interessiert das?
Wenn Sie Ihren eigenen Rechner erstellen und wiederverwenden, müssen Sie die Konzepte in den Berechnungen nachvollziehen.So haben Sie es, ein schickes Rechnerwerkzeug. Warum sollte es dich interessieren? Der Grund ist, dass Sie Instacalc nutzen können, um eigene Konstruktionsrechner zu erstellen und zu speichern. Angenommen, Sie möchten Pixel in Ems konvertieren. Wie würden Sie das tun? Mach einfach deinen Rechner auf!
Ich weiß was du denkst. Im Internet gibt es bereits eine Menge vorgefertigter, perfekt funktionierender Rechner. Warum gehen Sie die Mühe durch, sich Ihre eigenen zu machen? Ich bin ein großer Befürworter eines Tools, mit dem Sie Zeit sparen können, aber ich verstehe auch die Prozesse hinter diesen Tools.
Wenn Sie einen zufälligen Online-Pixel-Taschenrechner verwenden, erhalten Sie möglicherweise die Antwort, die Sie suchen, aber Sie erhalten dabei keinerlei Kenntnisse oder Erfahrung. Wenn Sie jedoch Ihren eigenen Rechner erstellen und wiederverwenden, müssen Sie die in den Berechnungen verwendeten Konzepte verstehen. Sie müssen nicht in Ihrem Kopf rechnen, aber Sie müssen wissen, woher die Mathematik kommt, und das ist ein wertvolles Wissen.
Grundlegender px zu em Rechner
Genug Setup, lasst uns ein paar Taschenrechner einbauen. Das erste, das wir versuchen werden, ist unser Beispiel von oben, Ihr grundlegender Durchlauf des Konverters von Pixeln in Pixel. Dies ist eine wirklich einfache Berechnung und um zu verstehen, was für eine? ist auf einem grundlegenden Niveau, sollten Sie wirklich die Mathematik ausarbeiten.
Zu Beginn müssen Sie eine Basisschriftgröße für Ihr HTML-Dokument haben, z. B. 16px. Wir geben diese Variable wie folgt in unsere Berechnung ein:
Beachten Sie, dass dies ein anpassbarer Wert ist. Wenn Sie möchten, dass die Basisgröße 14px ist, ersetzen Sie einfach? 16? mit? 14? Als Nächstes benötigen wir den Wert in Pixeln, den wir in ems konvertieren möchten. Wieder richten wir eine anpassbare Variable ein.
Hier ist der pädagogische Teil. Um den Rechner fertigzustellen, müssen Sie wissen, wie die Konvertierung funktioniert. Es stellt sich heraus, dass Sie zum Konvertieren von px in em einfach den Pixelwert, den Sie konvertieren möchten, durch die Basisschriftgröße dividieren. Um diese Berechnung durchzuführen, fügen wir die Variablen ein, die wir in den beiden vorherigen Schritten erstellt haben.
Wie Sie sehen, wandelt sich 24px bei einer Basis von 16px in 1.5em um. Wenn wir den px-Wert in 8px ändern, wird er in 0.5em konvertiert.
Versuch es
Das ist es! Wir haben jetzt einen schönen kleinen px zu em Rechner. Sie müssen lediglich die Basisgröße und / oder den Wert für die Konvertierung ersetzen, und der Rechner spuckt eine Lösung aus. Sie können unseren Rechner mit dem eingebetteten Widget testen (hier klicken, wenn das Widget nicht geladen wird).
em in px Rechner
Nun, da wir wissen, wie all dies funktioniert, drehen wir die Berechnung auf den Kopf und konvertieren sie von em in px. Wie zuvor müssen wir eine Basisgröße und einen Wert für die Konvertierung erstellen.
Diesmal jedoch multiplizieren wir den zu konvertierenden Wert mit der Basisgröße, um die Pixelkonvertierung zu erhalten. Bei einem Basiswert von 14px entspricht 2em also 28px.
Versuch es
Jetzt ist unser Rechner wirklich schlau! Es konvertiert px und em in beide Richtungen. Überprüfen Sie es mithilfe des eingebetteten Widget (klicken Sie hier, wenn das Widget nicht geladen wird).
% zu em Rechner
Manchmal geben Entwickler die Grundschriftgröße als Prozentwert an. Zum Beispiel ist 62,5% eine übliche Grundschriftgröße, da sich ems damit leicht im Kopf in px konvertieren lässt (1,2 em = 12px, 1.4em = 14px usw.). Warum funktioniert das? Wenn wir die Mathematik herausfinden, können wir es herausfinden!
Um em in px mit einer Basisgröße in Prozent umzuwandeln, multiplizieren Sie zunächst die angegebene Basisgröße mit dem Startpixelwert des Browsers in voller Größe (100% oder 16px). Das Ergebnis dieser Berechnung wird dann mit dem em-Wert multipliziert, den wir in px konvertieren möchten. Spielen Sie mit diesem Rechner unten oder sehen Sie ihn auf Instacalc.
Goldene Schnittlinienhöhe
Schauen Sie sich das Beispiel unten an, wenn Sie einen eigenen Rechner für das Design erstellt haben. Nachdem ich Pearsonifieds Ultimate Guide to Golden Ratio Typography gelesen hatte, wollte ich meinen Kopf um die komplexen Formeln wickeln, die er herumschleuderte, also baute ich diesen Rechner.
Im Grunde nutzt es das Konzept des Golden Ratios, um bei zwei Eingaben die ideale Zeilenhöhe für einen Textblock zu erreichen: Schriftgröße und Zeilenbreite.
Wenn ich einfach aufgehört hätte, nachdem ich den Artikel von Pearsonified gelesen hatte, hätte ich die mathematischen Prinzipien, die er aufgestellt hatte, nie wirklich verstanden. Erst als ich tief gegraben und mit den Zahlen selbst gespielt habe, hat alles geklickt.
Grid-Rechner
Ein anderer Ort, an dem wir häufig Berechnungen im Webdesign verwenden, ist die Erstellung eines Rasterlayouts. Grid-Rechner sind ein Dutzend Dutzend, aber wenn Sie die Mathematik dahinter verstehen, können Sie Ihre eigenen Rasterrahmen rollen, die perfekt auf Ihre individuelle Situation abgestimmt sind. Hier ist ein Beispiel für einen Grid-Rechner, den ich für den Anfang erstellt habe.
Was bauen Sie?
Sie sollten jetzt alles über Instacalc wissen und wissen, wie es Ihnen helfen kann, auch komplexe Berechnungen im Zusammenhang mit Konstruktionen zu berücksichtigen. Jetzt ist es Zeit für dich, ein paar deiner eigenen Rechner zu bauen. Hinterlasse einen Kommentar und zeig mir, was du drauf hast!