Design är ett komplext djur, webbdesign dubbelt så. Det finns mycket mer än visuell harmoni och balans att överväga, det är ofta fallet att du måste gräva in och utföra några riktiga matematik (gasp!).
Otroligt nog, jag älskar att tänka på det här, så mycket att jag faktiskt bygger mina miniräknare istället för att använda verktygen som finns tillgängliga från andra utvecklare. Idag visar jag dig hur och varför att bygga dina egna designkalkylatorer så att du kan behärska numren bakom dina mönster.
Möt Instacalc
Jag har nämnt Instacalc en eller två gånger tidigare på Design Shack. Det är inte ett designverktyg alls, men en nerdig matematisk lekplats. Så varför i världen tycker jag om det så mycket?
Instacalc är den perfekta produkten som sitter någonstans mellan en vanlig kalkylator och ett kalkylblad. Det är mycket kraftfullare än en kalkylator och inte så komplex som ett kalkylblad.
Hur det fungerar
När du laddar upp Instacalc ser du en serie fält. Här sätter du in dina beräkningar. Skriv bara in ett problem för att direkt se lösningen till höger.
Dessa fält kan hantera mycket mer än enkla formler, var goda att bli så komplicerade som du behöver, Instacalc hanterar allt du kastar på det med lätthet.
Den verkliga kraften i Instacalc ligger dock i sin förmåga att hänvisa till andra rader för att bygga på tidigare beräkningar. Till exempel här gör vi en beräkning i R1, använd sedan lösningen av den beräkningen för att uppnå någonting mer komplext i R2.
Förutom att direkt hänvisa till andra rader kan du ställa in variabler inom varje rad och refererar dem till under resten av dina beräkningar. Här är ett exempel:
Instacalc hanterar också texten ganska bra. Om du enkelt slänger i text efter ett nummer kommer det att ignoreras och kommer inte att komma i vägen för beräkningen. Om du föregår något med? //? Kommer denna text att överföras till slutresultatet och placeras efter lösningen som en kommentar.
Slutligen kan du titel, spara och dela en räknare som du skapar. Detta gör Instacalc till ett kraftfullt verktyg för att skapa återanvändbara anpassade räknare som kan refereras om och om igen av dig själv och andra.
Vem bryr sig?
? När du bygger och återanvändar din egen räknare, är du tvungen att förstå begreppen på jobbet i beräkningarna.?Så där har du det, ett snyggt räknareverktyg. Så varför ska du bry dig? Anledningen är att du kan utnyttja Instacalc för att bygga och spara dina egna designkalkylatorer. Till exempel, säg att du vill konvertera pixlar till ems, hur skulle du göra det? Bara slå upp din räknare!
Jag vet vad du tänker. Det finns redan ett ton av förbyggda, perfekt funktionella designrelaterade miniräknare på webben. Varför gå igenom besväret att göra din egen? Jag är en stor förespråkare för att använda något verktyg som hjälper dig spara tid, men jag handlar också om att förstå processerna bakom dessa verktyg.
När du använder några slumpmässiga online-px till en kalkylator kan du få svaret du letar efter, men du får ingen kunskap eller erfarenhet i processen. När du bygger och återanvändar din egen räknare måste du dock förstå begreppen på jobbet i beräkningarna. Du behöver inte göra matte i ditt huvud, men du måste veta var matematiken kommer från, och det är en värdefull bit av kunskap.
Grundläggande px till kalkylator
Nog installation, låt oss gräva in och bygga några räknare. Den första som vi ska försöka är vårt exempel ovanifrån, din grundläggande körning av brukspixlarna till em-omvandlaren. Detta är en riktigt enkel beräkning och för att förstå vad en? Em? är på en grundläggande nivå, bör du verkligen arbeta matematik ut.
För att börja, måste du ha en basstorlek för ditt HTML-dokument, säg 16px. Vi matar in denna variabel i vår beräkning som så:
Observera att detta är ett anpassningsbart värde. Om du vill att basstorleken ska vara 14px, ersätt helt enkelt? 16? med? 14 ?. Därefter behöver vi värdet i pixlar som vi vill konvertera till ems. Återigen skapar vi en anpassningsbar variabel.
Här är den pedagogiska delen. För att slutföra kalkylatorn måste du veta hur konverteringen fungerar. Det visar sig att konvertera px till em, du tar helt enkelt pixelvärdet som du vill konvertera och dela det med basstorleken. För att utföra denna beräkning kopplar vi in de variabler som vi skapade i de två föregående stegen.
Som du kan se, använder du en bas av 16px, konverterar 24px till 1.5em. Om vi ändrar px-värdet till 8px omvandlas det till 0.5em.
Testa
Det är allt! Vi har nu en bra liten px till en kalkylator. Allt du behöver göra är att ersätta basstorleken och / eller det värde som ska konverteras, och räknemaskinen spitar ut en lösning. Du kan testa vår räknare med hjälp av den inbäddade widgeten nedan (gå här om widgeten inte laddas).
em till px kalkylator
Nu när vi hänger på hur allt detta fungerar, låt oss vända beräkningen på huvudet och konvertera från em till px. Precis som tidigare måste vi skapa en basstorlek och ett värde att konvertera.
Den här gången multiplicerar vi dock det värde som ska konverteras av basstorleken för att komma fram till pixelkonvertering. Så med ett basvärde på 14px, är 2em lika med 28px.
Testa
Nu är vår kalkylator väldigt smart! Den omvandlar px och em i båda riktningarna. Kolla in den med hjälp av den inbäddade widgeten nedan (gå här om widgeten inte laddas).
% till em-kalkylator
Ibland förklarar utvecklarna faktiskt basstorleken i procent. Till exempel är 62,5% en vanlig basstorlek, eftersom det gör det enkelt att mentalt konvertera till px i huvudet (1.2 em = 12px, 1.4em = 14px, etc.). Varför fungerar det här? Om vi räknar ut matte kan vi ta reda på det!
Som du kan se, för att konvertera em till px med en basstorlek uttryckt som en procentandel multiplicerar vi först den uttryckta basstorleken med webbläsarens fullstartspotentialvärde (100% eller 16px). Vi multiplicerar sedan resultatet av den beräkningen med det em-värde som vi vill konvertera till px. Ta en lek med den här kalkylatorn nedan eller gå hit för att se den på Instacalc.
Golden Ratio Line Höjd
Som ett verkligt exemplar av när jag skapade min egen designrelaterade räknare, kolla in exemplet nedan. Efter att jag läste Pearsonifieds Ultimate Guide till Golden Ratio Typography ville jag sätta ihop mitt huvud kring de komplexa formlerna som han kasta runt, så byggde den här kalkylatorn.
I grund och botten är det som hävdar konceptet med det gyllene förhållandet att komma fram till den idealiska linjhöjden för en bit text när den ges två ingångar: teckensnittstorlek och linjebredd.
Om jag helt enkelt hade slutat efter att ha läst igenom Pearsonifieds artikel hade jag aldrig riktigt förstått de matematiska principerna som han satt ut. Det var inte förrän jag grävde djupt och spelade med siffrorna själv att allt klickade på.
Grid Calculator
En annan plats som vi ofta använder beräkningar i webbdesign är när vi utformar en rutnätlayout. Gridräknare är ett dussin ett dussin, men när du verkligen förstår matematiken bakom dem kan du rulla egna gridramar som är perfekt utformade för din unika situation. Här är en provkalkylator som jag byggde för att komma igång.
Vad kommer du att bygga?
Du borde nu veta allt om Instacalc och hur det kan hjälpa dig att bryta upp dig själv, även de mest komplexa designrelaterade beräkningarna. Nu är det dags för dig att hoppa in och bygga några av dina egna miniräknare. Lämna en kommentar nedan och visa mig vad du kommer med!