Share
Wiskunde is overal, zelfs waar je het niet zou verwachten. Je kunt wiskundige verhoudingen en constanten vinden in de architectuur, maar ook in de instrumenten die we gebruiken om muziek te maken. Je kunt wiskunde vinden in bepaalde spellen die we spelen, en daarom zou het niet moeten verbazen dat wiskunde ook een belangrijke rol speelt in webontwerp. Maar wat is deze rol? En hoe kunnen we deze verhoudingen, constanten en theorieën gebruiken om onze webontwerpen mooier te maken?
Walt Disney eens een film over gemaakt Donald Duck in Mathmagicland. In deze video - beschikbaar op YouTube - stellen ze kinderen voor aan wiskunde en waar het voor wordt gebruikt. Het laat zien dat een wiskundige verhouding wordt gebruikt om de noten op onze instrumenten te definiëren, en dat een wiskundige rechthoek te vinden is in zowel oude als moderne architectuur. Ook kunnen we dit exact dezelfde rechthoek vinden in sommige renaissancekunst door, bijvoorbeeld, de beroemde Leonardo Da Vinci.
De algemene les is simpel: je kunt enkele eenvoudige wiskundige principes gebruiken om orde en schoonheid in je eigen creaties te ontwerpen.
In het oude Griekenland was er een elite groep van wiskundigen die zichzelf de pythagoreeërs. De Pythagoreërs hadden het pentagram als hun embleem. Ze kozen deze vorm vanwege zijn wiskundige perfectie: de lineaire vorm van het pentagram bevat al drie keer de gulden snede! Er zijn ook heel veel gouden rechthoeken ook verborgen in de vorm, dit zijn dezelfde gouden rechthoeken die aanwezig zijn in de Mona Lisa.
Een tijdje daarna, in de 12th en 13th eeuw, leefde een getalenteerde Italiaanse wiskundige. Zijn naam was Leonardo Pisano Bigollo, hoewel je hem misschien beter zou kennen als Fibonacci. Voor zijn boek Liber Aci, hij observeerde het natuurlijke fokken van konijnen. In deze ideale wereld van hem, waar geen konijn ooit zou sterven en elk individueel konijn zo snel mogelijk zou beginnen met reproduceren, ontdekte hij dat deze cyclus een speciale reeks getallen bevatte. Deze reeks werd later bekend als de Fibonacci-nummers.
Het ding dat zo speciaal is aan deze reeks is dat als je een gekozen nummer deelt met het vorige nummer in de reeks, je (ongeveer) altijd hetzelfde nummer krijgt. Dit aantal is ongeveer 1.618, beter bekend als Phi. Hoe verder je in de reeks gaat, hoe dichter het resultaat van de splitsing bij Phi komt. Fibonacci ontdekte ook dat deze sequentie niet alleen voorkomt in het fokken van konijnen, maar ook in andere dingen in de natuur, zoals de rangschikking van zaden in een zonnebloem.
Zoals je misschien al weet, is Phi ook een zeer prominente constante in design; Dit komt omdat een verhouding van 1 tot 1.618 beter bekend staat als de Gouden ratio - vaak aangeduid als de gouden gedeelte, Gulden middenweg of de Divine Ratio. Als u een rechthoek maakt volgens deze verhouding, krijgt u een vorm die bekend staat als de Gouden rechthoek.
De gulden snede en de gouden rechthoek worden gebruikt in vele vormen van kunst en design. In de renaissanceperiode hebben veel kunstenaars hun kunstwerken geproportioneerd volgens deze verhouding en rechthoek. In het oude Griekenland gebruikten architecten deze rechthoek bij het ontwerp van de gebouwen; het Parthenon is daar een goed voorbeeld van. Zelfs in moderne architectuur heeft de gouden rechthoek een sterke aanwezigheid.
Maar wat maakt deze verhouding zo speciaal? Omdat dit aantal, Phi, zijn oorsprong vindt in de natuur, voelen wij mensen ons automatisch op onze gemak met deze verhouding. Omdat we zo bekend zijn met deze verhouding, veroorzaakt dit van nature een gevoel van balans en harmonie. Om deze reden kan het gebruik van deze ratio u een uitgebalanceerde samenstelling van uw elementen garanderen.
Voordat we zelfs gaan nadenken over het toepassen van de verhouding op onze ontwerpen, moeten we eerst een paar voorbeelden bekijken die de verhouding al gebruiken.
Een goed voorbeeld is deze website, omdat het ontwerp meerdere cases van de ratio bevat. In de onderstaande afbeelding ziet u een screenshot van deze website. Zoals u kunt zien, heb ik twee kleuren gebruikt om de verschillende kolommen te markeren. De breedte van de hoofdkolom met de blogberichten erin is min of meer 1,618 keer zo groot als de zijbalk met de advertenties. Een snelle berekening aan de onderkant bewijst dit.
Maar niet alleen gebruikt deze website de gulden snede op de totale breedte, het wordt ook toegepast op enkele van de kleinere delen van de website.
Laten we snel de hoofdkolom bekijken en vervolgens de inhoud erin. Zoals je hieronder kunt zien, is het bevattende element ongeveer 1,618 keer zo groot als de inhoud die binnen dit element moet worden gelezen.
Een ander goed voorbeeld is het beroemde Smashing Magazine-blog. De hoofdkolom heeft een totale breedte van iets meer dan 700 pixels. Wanneer u dit getal met 1,618 deelt, is ongeveer 435 het resultaat: de exacte breedte van de zijbalk.
Het canvas van een schilderij en de breedte van een gebouw hebben allemaal een vaste breedte, de monitoren die ons werk tonen variëren in grootte. Daarom - en vooral in vloeistofontwerpen - is er een extra variabele waarmee rekening moet worden gehouden bij het berekenen van de gulden snede.
Er is echter een eenvoudige manier om dit probleem te verhelpen. Wanneer u de breedte van een element volgens de ratio wilt berekenen, hoeft u alleen de breedte van het bovenliggende element in te nemen, dus het element dat het bevat. In ons eerste en laatste voorbeeld was dit de volledige breedte van een website. In het tweede voorbeeld was dit net de breedte van een kleiner deel: hun hoofdkolom.
Hoe dan ook, als je de breedte van het element hebt bepaald, moet je deze waarde nu delen door Phi. Het resultaat geeft u de breedte van het hoofdelement. Nu hoeft u alleen nog het resultaat van het hoofdelement af te trekken van uw oorspronkelijke breedte, dit geeft u de breedte van de secundaire kolom.
Als je problemen hebt met het onthouden van Phi, of als je gewoon lui bent om een aantal cijfers op een rekenmachine in te vullen, raad ik aan om Phiculator te gebruiken. Deze kleine applicatie vereist dat u een waarde invult (de breedte van het bevattende element dat is) en berekent automatisch de bijbehorende breedte. Je kunt het zelfs vragen om te rekenen met gehele getallen, dus je hoeft je ook geen zorgen te maken over decimale getallen.
Een andere beroemde wiskundige divisie is de regel van derden. Deze regel kan je helpen een uitgebalanceerde compositie te maken door je canvas in negen gelijke delen te delen. De regel is een beetje vergelijkbaar met de gulden snede, omdat de deling met 0,62 sterk lijkt op 0,67, wat overeenkomt met tweederde.
Een vorm van kunst waarbij de regel van derden heel vaak wordt gebruikt, is in de fotografie omdat het gemakkelijk en snel is gids om je een goede compositie te geven. Dit is de reden waarom u waarschijnlijk een functie op uw digitale camera zult vinden die het LCD-scherm in negen delen verdeelt, gebruikmakend van de regel van derden. Zelfs sommige DSLR's hebben deze functie, omdat ze tijdens het scherpstellen een paar lichtpuntjes in de zoeker plaatsen.
Gebruik de regel van derden om je canvas horizontaal te verdelen en verticaal binnen door drie. Deze indeling geeft je negen gelijke rechthoeken, vier lijnen en vier snijpunten. U kunt een interessante en uitgebalanceerde compositie maken door deze lijnen en snijpunten te gebruiken.
De sleutel tot een goede samenstelling ligt natuurlijk in het correct positioneren van uw elementen. Wanneer u de regel van derden gebruikt, zijn er twee dingen waarmee u kunt positioneren.
De eerste zijn de lijnen die worden gebruikt om het canvas te verdelen. In de fotografie zijn dingen met een lange en rechte vorm vaak in lijn met deze lijnen. In ontwerp kunnen dingen met dezelfde vorm - zoals een zijbalk - ook op deze lijnen worden uitgelijnd.
De tweede dingen om op te lijnen zijn de punten waar je scheidslijnen elkaar kruisen. Je moet een of twee objecten op deze punten plaatsen, want te veel zal je compositie nog steeds doden.
Een goed voorbeeld hiervan vond ik op Photography-website Flickr. Zoals u hieronder kunt zien, heeft de fotograaf de rij gebouwen op de bovenste rij uitgelijnd en op het snijpunt rechtsboven vindt u een huis dat het meest opvalt vanwege de kleur. Omdat het op zichzelf al een brandpunt is, draagt het afstemmen op het kruispunt bij aan een goede compositie en een gebalanceerd gevoel.
flickr-foto hier gevonden We hebben de regel van derden toegepast op fotografie, maar hoe zit het met de toepassing ervan op website-ontwerp, kunnen we daar voorbeelden van vinden?
Een goed voorbeeld van de regel die wordt toegepast op webdesign is, nogmaals, deze website. Ik heb een afbeelding voorbereid die je hieronder kunt zien. Het laat zien dat de zijbalk aan de rechterkant zeer dicht op de verticale lijn aan de rechterkant is uitgelijnd. Aan de linkerkant ziet u dat de artikelen op de kruisende punten zijn gepositioneerd.
De twee uitlijningen die u hierboven ziet, creëren een gevoel van harmonie in de lay-out van deze website.
Dus hoe precies kan de regel van derden worden toegepast op het ontwerp van uw site? Nogmaals, de variërende breedte van ons 'canvas' kan voor wat problemen zorgen. Wanneer we echter dezelfde techniek gebruiken als bij de gulden snede, komt alles goed.
Om de deling toe te passen, moet u de volledige breedte van uw element opnemen en deze door drie delen verdelen. Je moet dan een lijn trekken - of een gids, wat het beste bij je past - twee keer op de waarde die je krijgt als resultaat (vermenigvuldig ze met twee om de positie van de tweede regel te krijgen).
Het tweede deel van de divisie kan je echter wat problemen bezorgen. De hoogte van ons 'canvas' is ook variabel, daarom zal het verdelen van deze variabele door drie ons wat problemen geven. De manier die ik gebruik om dit te omzeilen, is om de 'hoogte' van de divisie te berekenen met een 16: 9 (breedbeeld) verhouding of gewoon de hoogte van het bevattende element te gebruiken. Verdeel de breedte van het bevattende element met 16 en vermenigvuldig dat getal met 9 en je hebt een hoogte. U kunt dit getal nu opnieuw delen door 3 en de lijnen / hulplijnen tekenen.
Wanneer u de gidsen hebt ingesteld, kunt u nu uw elementen volgens deze handleidingen positioneren. Lijn je elementen uit met de lijnen, en je moet een aantal elementen van interesse en contrast plaatsen op de snijpunten.
Je zou denken dat rasters niet wiskundig zijn, maar dat zijn ze wel. Je deelt je canvas in verschillende kolommen en goten, deze verdeling door twee, drie - en ik heb er tot zestien gezien - is echt wiskundig.
Veel mensen beweren dat rastersystemen je creativiteit beperken, omdat je je vrijheid beperkt door een rastersysteem. Ik denk niet dat dit waar is, zoals het boek Vormator me leerde dat beperkingen je creativiteit daadwerkelijk een boost geven. Dit komt omdat je oplossingen met deze limieten in gedachten zult bedenken, terwijl aan deze ideeën nooit gedacht zou zijn als je deze beperkingen niet hebt.
De reden dat grid-systemen 'werken' is dat ze u kunnen begeleiden bij het dimensioneren, positioneren en afstemmen van uw website-ontwerp. Ze kunnen u helpen bij het organiseren en verwijderen van rommel uit inhoud. Maar het belangrijkste is dat ze eenvoudig te gebruiken zijn.
Een andere goede reden om rasters te gebruiken, is dat regels bedoeld zijn om te worden verbroken, toch? Als je af en toe je grid 'breekt', is dat niet slecht. Integendeel! Het 'doorbreken' van uw raster kan speciale interesse creëren voor een specifiek element op de pagina, omdat het in contrast staat met de rest. Dit kan u helpen bepaalde doelen te bereiken, zoals een oproep tot actie die hierdoor meer opvalt.
Er is geen echt vaste manier om een goed rastersysteem te bouwen, omdat ze draaien om inhoud en geen inhoud hetzelfde is. Maar omwille van dit, zal ik een eenvoudig proces demonstreren voor het construeren van een 6 kolomraster in een 960-pixel brede omgeving.
Eerst delen we onze totale canvasbreedte met 6, zodat we de totale breedte van elke kolom hebben. Het resultaat van deze verdeling is 160 pixels, zoals u hieronder in de afbeelding kunt zien.
Ten tweede maken we een afbeelding van één kolom, we dupliceren dit later. Op deze manier is het gemakkelijker om ons volledige raster achteraf te maken, omdat we deze stap voor elke kolom niet hoeven te herhalen.
We bepalen de grootte van onze rugmarge, ik denk dat 20 pixels voldoende is. De rugmarge moet aan beide zijden van de kolom worden toegevoegd, dus we moeten deze door twee delen verdelen. Als we dit niet doen, is onze rugmarge 40 pixels breed. Zoals u in de onderstaande afbeelding kunt zien, hebben we aan elke kant een goot met 10 pixels toegevoegd.
Nu kunnen we deze afbeelding dupliceren tot we het totaal van 960 pixels weer hebben bereikt, en we hebben onszelf een (basis) raster gemaakt.
Maak je geen zorgen; zelfs als je lui bent, hoef je niet zonder roosters te leven. Er zijn veel leuke - en gratis - rastersystemen voor het grijpen op het internet. Mijn favoriet, en ik weet zeker dat je er al eerder over gehoord hebt, is het beroemde grid systeem van 960.gs, dat een CSS-framework en een PSD-bestand heeft met alle gidsen geïnstalleerd.
Ik hoop dat ik je heb laten zien dat wiskunde mooi kan zijn wanneer toegepast op ontwerp en dat ik je genoeg technieken heb gegeven om te gebruiken in je volgende ontwerp. Wees echter gewaarschuwd, er zijn nog veel dingen nodig om een ontwerp tot een succes te maken. Daarom is het gebruik van deze trucs geen garantie voor een goed ontwerp, maar ze kunnen u zeker helpen en u begeleiden bij het maken van een ontwerp.
Bedankt voor het lezen!
Accentsconagua