Share
Anpassning är ett av de saker som kommer hand i hand när man arbetar med nätsystem. Ämnet med anpassning handlar inte bara om att välja om du vill anpassa text eller bilder till vänster eller höger om en design (även om dessa beslut uppenbarligen fortfarande spelar roll), istället använder vi anpassning för att förbättra våra mönster. Korrekt inriktning i dina mönster gör dem visuellt mer tilltalande och kommer också att underlätta för användarna att skanna över en sida, vilket medvetet ger en lugnare läsupplevelse.
Alla element i din design måste anpassas på något sätt, om det bara är ren text på din sida, bilder blandade i texten (eller till och med header eller hjältebilder), videoklipp, knappar och call-to-actions, länkar (inom texten eller i moduler som en navigationssektion) eller andra element du kanske har.
Grids kommer att gå något för att hjälpa dig att lösa justeringsproblem eller beslut i din design, men det vi behöver fokusera på här är hur de olika elementen, grupperna av element eller vissa moduler i din design fungerar tillsammans. Jag har understrukit från början vikten av en sammanhängande användarupplevelse och att få rätt inriktning är en av de väldigt viktiga sakerna som kan bidra till att förbättra användarens upplevelse.
Justering tillåter oss också att fatta medvetna beslut om var elementen är placerade och hur de interagerar med varandra. Att skapa bra anpassning överbryggar det visuella gapet mellan varje element i din design och hjälper oss att skapa relationer mellan de element som vi har. Annars skulle vi ha en design som har block av text och bilder överallt, vilket ger lite mening utan struktur.
Som förklaras i tidigare gridartiklar verkar det som att många människor inte gillar grid eftersom de finner att de begränsas. att de ofta krossar alla möjligheter till kreativitet inom en design.
Detta är helt förståeligt. Galler är ett gäng kolumner och rader som i huvudsak hjälper oss att skapa block CSS lägger i regel ut element i en boxarrangemang. Det kan dock vara svårt att känna igen en lämplig tid att bryta från vårt nät.
Inte allt på din webbdesign måste justera. Ibland beror det på din kreativitet, beroende på din design eller hur du jobbar. Tänk istället på hur du kan blanda dina justeringar. På det här sättet ser du fortfarande till att det finns ett mönster för varje element eller modul på din webbplats, men genom att blanda anpassningarna garanterar du att du fortfarande skapar något visuellt intresse som kommer att hålla dina användare ute på webbplatsen.
Blandning av anpassningar innebär också att du kan spela med layouter och rutor lite mer - istället för att använda ett 6-kolonnnät, varför inte också införa ett annat galler som du kan överlappa med - till exempel ett raster med 4 kolumner.
Ett exempel på galleröverlagring - sex kolumner med fyra kolumnlayout överlagrade. Inbyggd Gridset App. Medan du inte strikt bryter från ditt nät helt, introducerar du istället ett nytt rutnät som du kan arbeta med, och erbjuder ännu mer anpassning och layoutalternativ i dina mönster.
Blandning av anpassningar betyder inte bara att du introducerar nya rutor, kolumner eller extra till din struktur. Använd istället ditt nuvarande rutnät för att blanda vilka element som är anpassade till vilka kolumner. Du kan till exempel ha dina huvudelement inriktade på kanterna i de första och sista kolumnerna - men du kan då bestämma att anpassa din huvudtext till de första och sista kolumnerna. Det bästa är att ett nät ger dig en nästan oändlig mängd anpassningsalternativ, även med något så lite som ett 4-6 kolonnät.
Blanda anpassningar är ett sätt att hålla dina användare intresserade och varna när du surfar på en webbplats. Istället för att hålla element liknande, introducerar det en annan nivå av inriktning mot elementen i din design, men det kan medvetet vara medvetet.
De viktigaste anpassningsalternativen du har för din text liknar de alternativ som finns tillgängliga i CSS: vänster, höger, centrerad eller motiverad. Ganska självförklarande verkligen; Om du vänsterjusterar din text kommer den att svänga åt vänster, om du justerar din text högerjusteras den till höger.
Istället är vad du vill tänka på hur passande dessa anpassningar är för din text och hur de sitter i din design. Till exempel kan små mängder text fungera bra i en centrerad anpassning, men det blir mer förvirrande och svårt att läsa på större bitar av text. På samma sätt, med rubriker kan det fungera bra i din design för att anpassa dem centralt, men det beror på textens storlek och var den placeras. Exempelvis kanske ett centralt inriktat rubrik inte fungerar bra när det har en stor bit text som är vänsterjusterad omedelbart under.
Du måste också tänka på de kulturer som kan utsättas för din design och webbplats. I vissa kulturer läser du från höger till vänster, men i de västerländska kulturerna är det från vänster till höger och från topp till botten.
.innehåll riktning: rtl; textjustera: höger;
På grund av den västerländska kulturen att läsa från vänster till höger kommer det sannolikt att vara svårt att ha en stor mängd text i rätt riktning. Använd istället de anpassningar som kan vara svårare att läsa i mycket små mängder, i mer av en designfunktion som i en sidfot för adress eller kontaktinformation eller i en rubrik med en lista över navigeringslänkar.
Justering av bilder kan vara svårt, eftersom justeringen som du ska använda för varje bild är i förhållande till bildens storlek. Mindre bilder är naturligtvis enklare att placera i ditt innehåll på ett sätt som inte stör innehållet, medan större bilder tenderar att störa läsflödet mer och är därför svårare att placera i ditt innehåll.
Du har två alternativ; antingen placera dina bilder utanför innehållsflödet (till exempel mellan stycken eller i början eller slutet av ditt innehåll), eller så kan du träna dina bilder i ditt rutnät.
Det första alternativet är ganska enkelt att genomföra. Utan att störa textflödet kan du placera bilder på antingen full bredd eller en anpassad bredd och mitt i det område som texten normalt är i. Det är enkelt nog och ser fortfarande bra ut, men fungerar bra när vi skala ner en webbplats om det är lyhört.
Det andra alternativet kan bli lite mer komplicerat, beroende på hur du bestämmer dig för att placera bilderna i ditt innehåll. Du har flera alternativ. Du kan först få bilderna att anpassa sig perfekt (till vänster eller höger) med texten, eller du kan få bilderna att dyka ut något förbi innehållets kant.
På så sätt kan dina bilder placeras en hel kolumnbredd i innehållet, med innehållet som flyter runt bilden. Detta stör inte läsflödet så mycket som om bilden placerades helt inuti innehållsområdet, men det lägger också intresse för din design - för du skapar ett annat anpassningsområde för dina element som kommer att hålla din design visuellt friskare och mer engagerande.
Justering av bakgrundsbilder är en av de små tuffarna - och det är allt i förhållande till din design och motiv, liksom storleken på bakgrundsbilden själv.
Precis som i textinriktningarna kan anpassningen av dina bakgrundsbilder mycket matcha dina CSS-regler. fast, absolut, till toppen eller till botten, till vänster eller till höger? Det beror verkligen på din design och hur bakgrundsbilden passar in med det. Om din design har ett mönster, tänk på hur det här mönstret anpassar sig till dina element - du vill se till att det stämmer snyggt mot dina element eller annars kan det slänga hela designen helt.
Tänk också på hur det ser ut om du har en stor bakgrundsbild och hur det passar in i din design. Om de är stora och ganska stora fokuser kanske du tänker på hur dina andra element och moduler passar in i den designen. Till exempel kan din huvudtext anpassas med kanterna på designen? Det handlar om att ifrågasätta hur dina bilder fungerar med de andra delarna av din design och hur du kan arbeta med dem för att göra din design mer polerad och samarbeta mycket bättre.
När jag beskriver en elementgrupp tänker jag på det som väldigt annorlunda än vad jag skulle beskriva som en modul.
När man tänker i termer av moduler-både i design och när man utvecklar webbdesignen, tänker jag på dem som en grupp av element som är relaterade till varandra, som ligger mycket nära varandra. Exempel på moduler för mig är en grupp länkar, en hjältebild och överlagring av text eller rubrik; Allt som kan grupperas är ett repeterbart mönster eller fristående modul.
Men en element grupp är en grupp av element i din design, som inte gör det nödvändigtvis måste vara nära varandra. En elementgrupp kan till exempel vara både dina rubrikobjekt (t.ex. logotyper och navigeringslänkar) samt dina sidfotar (kanske en annan uppsättning länkar, tillsammans med ett upphovsrättsmeddelande). Dessa är grundgrupper och du kan sedan anpassa dessa elementgrupper tillsammans i din design. Även om sidhuvudet och sidfoten kanske inte är synliga på samma skärmutrymme som varandra, kommer dessa subtila användningsområden att anpassa sig till en starkare, mer visuellt tilltalande och mycket mer konsekvent design.
Andra exempel på elementgrupper är helt enkelt både texten och bilderna på din huvudkopia på en sida, eller kan till och med vara så enkelt som en uppsättning navigationslänkar eller element. Till exempel, i en mer komplex navigering kan du ha de viktigaste textlänkarna, men också en mindre "underrubrik" till länken. Dessutom kan du ha en ikon ovanför eller under länktexten. Medan dessa är alla enskilda bitar och dessa tre bitar utgör en länk, kan alla dessa enskilda länkar utgöra en komplex navigeringsmodul, men kan också sättas ihop som en elementgrupp, som du sedan kan anpassa med andra grupper i designen.
Nu vet du allt om justering i dina mönster (och med dina nät) Jag vill att du ska börja titta på dina mönster och titta på hur alla element inriktas. Prova att gruppera olika element, elementgrupper och titta på att anpassa texten och bilderna i dina mönster.
Se vad du kan göra för att skapa en bättre design genom att korrekt anpassa varje element i din design. Använd nätverkssystemet från ditt senaste uppdrag, arbeta för att anpassa alla element i din design med hjälp av de tips som anges i dagens inlägg.
Accentsconagua