Share
Idag har jag en speciell godis för alla er glädjeälskare där ute! Khoi Vinh (en av de ledande myndigheterna på typografiska rutsystem i webbdesign) och Peachpit har gått med på att låta oss publicera ett utdrag av Khois nya bok om nätdesign: Beställningsorder: Gridprinciper för webbdesign. I detta utdrag skisserar han de principer som varje designer ska komma ihåg när man utformar en webbplats på ett nät.
Rutnätet har länge varit ett ovärderligt verktyg för att skapa order ur kaos för designers av alla slag - från stadsplanerare till arkitekter till artister och grafikartister. Under de senaste åren har webbdesigners också kommit för att upptäcka den anmärkningsvärda kraft som nätbaserad design har råd med att skapa intuitiva, uppslukande och vackra användarupplevelser.
Order Disorder ger en slutgiltig tagning av nät och webben. Det ger både de stora idéerna och mässingsteknikerna för nätbaserad design. Läsarna kommer säkert att komma undan med en skarp förståelse för nätets kraft, liksom de designverktyg som behövs för att implementera dem för World Wide Web.
Följande är ett utdrag, men som du läser är hela boken skriven så att den kan hämtas i något kapitel och ändå vettigt? så detta borde vara en perfekt plats för dig att hoppa in.
Vi har också en särskild 35% rabattkod för våra läsare som vill hämta hela boken (i slutet av posten)!
Balansen i den här boken fokuserar på hur man bygger ett rutnät, inklusive en översikt över stegen till en arbetslösning. Innan vi börjar, är det dock bra att beskriva principer som varje designer ska tänka på.
Ett rutnät bör fokusera på problemlösning första och estetiska andra. Ett rutnät kan ge en sådan förförisk estetisk förstärkning till vilken design som helst, det är frestande att fokusera på sin skönhet istället för dess användbarhet. Många konstruktörer blir upptagna med nätets skönhet och kontrastinnehåll eller funktionalitet för att klämma in det, oavsett hur obehagligt eller obehagligt det kan vara. Men de mest framgångsrika rutorna är inbyggda i service av väldefinierade problem. Oavsett om det är kommunikationsproblem, organisationsproblem eller transaktionsproblem, kommer ett nät från sin skönhet från hur bra det löser de utmaningarna.
Ett nät är en del av användarupplevelsen. Ett rutnät är inte ett verktyg för att införa fullständig kontroll över användarens upplevelse av en webbplats. Snarare är ett nät ett ramverk där användaren kan styra sina egna erfarenheter. Designers bör inte tvinga varje element och interaktion att inträffa i nätet, och de bör inte låta användarupplevelsen vara offormad och oförutsägbar. Det är designerens jobb att göra vissa beslut för användaren - inte alla beslut, men tillräckligt för att användaren kan uppnå sina mål utan hinder. Rutnätet är ett verktyg för det jobbet.
Ju enklare nätet är desto effektivare är det. Principerna som beskrivs i den här boken kan användas för att skapa nät som består av sexton, tjugo eller till och med fler enheter, i en kombination av kolumner med enhetlig eller oregelbunden bredd. Faktum är dock att konstruktören alltid ska sträva efter att skapa det enklaste nätet som är möjligt. Som vi ser är matematisk precision ett nyckelelement i bra rutnätdesign, men matematisk användbarhet är lika viktig. Formlerna som du använder för att beräkna kombinerade enheter och kolumner ska vara ganska enkla, även enkla att göra i ditt huvud eller för att förklara snabbt för en kollega. Ju enklare ett rutnät system är att använda och förklara för andra, desto fler användare kommer att dra nytta av det nätverket.
Här är de viktigaste stegen när det gäller att utforma en nätlösning:
Tänk på att även om vårt tänkande borde vara strängt, behöver vår process inte vara. Även om den ordning i vilken jag har presenterat dessa steg har varit användbar för mig, kanske det inte nödvändigtvis fungerar för alla
designer. Inte varje steg måste följas i exakt samma ordning, för en viss tid, på ett visst sätt, eller ens alls. Exempelvis är steg 3, förberedande design, en uppsättning av tre olika aktiviteter
som ofta görs samtidigt, med konstruktören byta mellan penna och papper, mjukvara och matte omslaget efter behov. Det som är viktigt är inte rote repetitionen av dessa steg, men att följa
principerna för god rutnät design hela tiden.
Samma sak är det värt att spendera lite tid framåt för att diskutera viktiga steg i den här processen. Den första är forskning, och den andra är sketching.
Vi bedömer först en riktigt bra design inte av sin skönhet eller dess innovativitet eller dess effektivitet, utan snarare hur väl den svarar på dess ursprungliga problem. Framgångsrika lösningar kräver att konstruktören tar itu med det problem som presenteras för henne och de begränsningar inom vilka hon arbetar. Designern måste fråga och förstå svaret på frågor som: vem är publiken, vad är kontextet, när kommer lösningen att hittas, hur ska lösningen användas - och till och med varför lösningen är nödvändig?
Dessa frågor kan vara svåra att svara, och svaren är ofta oklara eller svåra att analysera. En formgivare måste vara beständig när man frågar dem, genom att trycka på för bra och korrekta svar och genom att noggrant undersöka och förstå dessa svar.
Eftersom ett rutnät kan ge oss en sådan start för att skapa lösningar, kan det vara frestande att avstå från detta stadium av processen. När en designer mästar grunderna i grids blir det mycket lättare att starta den mekaniska processen att bygga enheter och kolumner än att göra det svåra arbetet med att fråga och svara på dessa frågor.
Men nästan varje designproblem kräver en period av tankeväckande studie innan sökandet efter en lösning börjar. Utan en tydlig känsla av utmaningen till hands, är något designarbete, inklusive utvecklingen av nätet, gjort förgäves. Det är en mycket mer produktiv användning av tid att göra forskning i början av ett projekt än att hoppa direkt till designen.
Grid-baserade mönster är inte annorlunda. Ju mer fullständigt problemet undersöks desto bättre blir nätet. Välskötta grids maximerar de kreativa alternativen som är tillgängliga för designern. De förutser också och undviker fällor av tidigt konstruerade nät: olämpligt strukturerade enheter och kolumner, nät som är bra för vissa aspekter av problemet, men otillräckliga för andra, nät som inte klarar av begränsningar som kanske inte är uppenbara i början, nät som visar sig vara oföränderliga att de behöver byggas om igen vid otillbörliga tider, och nät som visar sig oanvändbara för samarbetare.
Vilken typ av begränsningar ska designern leta efter? De faller i tre huvudkategorier:
Självklart kommer designers att bekämpa obekvämligheterna, eller kanske tornigheten hos några av de speciella begränsningar som de måste strida mot. Om bara dessa begränsningar lyftes, om problemet bara var lite annorlunda skulle lösningen vara mycket lättare att komma fram till eller mer elegant i naturen.
Dessa begränsningar har dock ett silverfoder: på vissa sätt kan de göra ett problem svårare, men de kan också göra det lättare att komma fram till en design. Omfattande lösningar som galler kan ofta dra nytta av att byggas kring en eller två icke-reglerbara begränsningar, obevekliga krav som inte lätt kan förändras under designprocessen. Till att börja med kan de direkt påverka proportionerna i ett rutnät, storlekarna på enheter, kolumner och regioner som konstruktören konstruerar. Sådana hinder kan verka för att begränsa alternativen som är tillgängliga för en formgivare, de har ofta också effekten att öka en designers uppfinningsrikedom. Ju bredare ett designproblem och de mindre restriktiva begränsningarna är desto mindre en formgivare kommer sannolikt att göra de insiktsfulla språng i logiken som är kännetecknet för stor design. Nonnegotiable begränsningar kan hjälpa till att sporra en designer att göra detta. Oavsett om det låser sig i en viss dimension, en teknologisk imperativ, en reklamsenhet eller någon annan faktor som en formgivare måste arbeta runt istället för att bekvämt ändra på sina egna behov - ha ett oumbärligt krav kan vara oerhört användbart.
Efter att ha spenderat så många avsnitt som betonar vikten av att grundligt undersöka ett problem, kan jag göra nästa punkt mer noggrant: skissa på papper är ett viktigt verktyg för noggrann designproblemlösning, och det är särskilt användbart när det gäller att utveckla nät. Den enkla handlingen att snabbt och löst utspeka spekulativa kombinationer av kolumner och möjliga layouter kan spara stora mängder tid och leder ofta till mycket mer kreativt bördiga nätlösningar än att bara hoppa framåt för att designa eller till och med koda ett rutnät.
Jag kan inte tillräckligt betona kraften och användbarheten av att använda gammaldags penna och papper för att lösa problem, brainstorma potentiella lösningar och utforska lovande eller till och med inte så lovande idéer som kan vara för kostsamma eller tidskrävande att testa annat. Faktum är att den viktigaste aspekten av skissning inte så mycket gör varumärken på papper, utan snarare att kunna springa igenom många idéer snabbt, med låg kostnad. Kom ihåg att du inte har förväntningar på att skisserna kommer att motsvara något annat än bara skisser. Skissar behöver inte vara söta.
Som tidigare nämnts är det också viktigt att komma ihåg att skissa inte behöver vara en diskret fas för att bygga ett rutnät som börjar och slutar på specifika punkter. Skissning kan ske i vilken fas som helst under hela projektet, på flera nivåer, men det är självklart mest användbart att skissera tidigare, så att fler idéer och möjligheter kan köras mycket snabbt. Att alltid hålla en penna och en pappersduk är säker att visa sig vara ovärderligt.
Ordförrådet som beskriver de olika komponenterna i ett nät kan tyckas enkelt, men det kan också vara överraskande ospecificerat. Till exempel: begreppet kolumn verkar noggrann, men på en sida baserad på ett åtta kolumngrid kan en designer skapa en layout med endast två kolumner text, vilket gör betydelsen av den termen oklar. Även böcker om hantverket för nätbaserad design är inte alltid överens om terminologi, med vissa som använder termer (t.ex. regioner, fält) som saknas från andra. I den här boken är det viktigt att fastställa en viss gemensam terminologi när vi fortsätter vidare i mer praktiska diskussioner om nät.
Byggblocket i varje galler, en enhet är den minsta vertikala uppdelningen av sidan (dvs enheter mäts i bredd), på vilka kolumner är byggda. Enheter är vanligtvis för smala för att hysa det mesta textinnehållet.
Kolumner är grupper av enheter, tillsammans för att skapa användbara områden för presentation av innehåll. De flesta textkolumner, till exempel, kräver att två eller flera enheter är användbara. Ett rastersystem med exempelvis sexton enheter kan kombineras i två kolumner med åtta enheter vardera, eller fyra kolumner på fyra enheter var och en och så vidare.
Regioner är grupper av liknande kolumner som utgör delar av sidan. Exempelvis kan i de fyra kolumnerna de första tre kolumnerna från vänster utgöra en enda region för visning av en typ av innehåll och den återstående kolumnen kan bilda en annan region.
Fält är horisontella delar av sidan (dvs fält mäts i höjd) som hjälper en designer att visuellt anpassa placeringen av element på Y-axeln. Fält kan beräknas på många sätt, men med det gyllene förhållandet är det en av de mest effektiva metoderna.
I traditionell typografi är baslinjen den osynliga linjen på vilken brevformar vilar, till exempel den undre kanten av en huvudstad E vilar på grundlinjen, medan nedgången av en liten bokstav p kommer att falla under baslinjen. Gränssnittet bildas av en enhetlig, uppifrån och botten upprepning av baslinjer på avstånd i linje med textens ledande eller linjära avstånd.
Dessa begrepp är notoriskt lätt att förvirra (en enhet kan betraktas som antingen en horisontell eller vertikal uppdelning av en sida, beroende på en punkt i vew), så den här boken refererar istället till det kolumnära rutnätet (sektionerna av sidan uppmätt i bredd ) och baslinjen och regionerna (sidans uppdelningar mätt i höjd).
Gutters är tomma utrymmen mellan enheter och kolumner. När enheter kombineras i kolumner, införlivar de rännorna mellan dem, men inte mellansidan till vänster om vänster enhet eller utrymmet till höger om höger sida.
Marginaler är utrymmet utanför en enhet eller kolumn. Padding är utrymmet i en enhet eller kolumn. Marginaler används vanligtvis för att skapa takrännor medan padding vanligtvis används för att skapa en liten synlig insats inom ett block av text inuti en kolumn.
Ett element är en enskild komponent i en layout. Exempel är en rubrik, ett textblock, ett foto eller en knapp.
Moduler är grupper av element, kombinerade för att bilda diskreta block av innehåll eller funktionalitet. En registreringsblankett är till exempel en modul som består av flera beståndsdelar, såsom en etikett, ett formulärfält, en knapp och så vidare.
Detta har varit ett enda kapitel från boken? om du vill läsa resten av boken kan du köpa den över på peachpit.com. Den goda nyheten är att vi har en särskild kampanjkod för våra läsare. Skaffa sig 35% av priset genom att ange koden "Khoi"under utcheckningen på peachpit.com. Åh, och USAs inrikes frakt är gratis!
Accentsconagua