Share
Idag ska vi titta på en designprincip som spelar en viktig roll för framgången med en webbdesign: Enhet. Som med många designade element i världen kan enighet göra eller bryta en webbplatss design. En väl "enhetlig" webbplats känns naturlig, organisk och sömlös; Där en plats saknar enhet kan känna sig ojämn, diskontinuerlig och discombobulated (med andra ord faller den bara visuellt). Läs vidare för att få veta mer!
Enhet är ett intressant koncept. Om vi tittar på den tekniska definitionen finns det några som kan gälla i samband med webbdesign? till exempel "staten att vara förenad eller förenad som helhet" och "harmoni eller överenskommelse mellan människor eller grupper". Specifikt kan vi dock titta på en definition som gäller för detta scenario som av de gyllene reglerna för bra webbdesign: "tillståndet att bilda en komplett och tilltalande helhet".
Enhet är verkligen viktigt eftersom det hjälper till att skapa ett konsekvent varumärke och identitet för din webbplats. Det skapar en koppling mellan dina element så att användarna har en lätt tid att gå mellan dessa element och också mellan de olika sidorna på din webbplats. I grunden skapar begreppet enhet en stark relation mellan element så att användaren uppfattar dem som en, inte som en grupp.
Tänk på det här sättet. Om du bor i ett hus av tegel, säger du inte "Jag bor i en massa tegelstenar". I stället säger du "Jag bor i ett hus". Det beror på att du har en grupp olika element (nämligen tegel) som är förenade som ett hus och människor tar in strukturen som en enda byggnad tack vare anslutningarna och starka relationer mellan de (bokstavliga) byggstenarna.
Detsamma gäller också massor av saker i den naturliga världen. Tänk på bladet till höger. Den innehåller miljontals celler och andra byggnadsstrukturer, men de flesta tänker bara på det som ett blad.
Enhet håller din design tillsammans som strukturen, både visuellt och konceptuellt. Det lägger till organisation och kommer att underlätta användarens resa över din webbsida eftersom de inte behöver behandla varje element individuellt. Detta indirekt hjälper till att trycka ut innehållet och låter användaren fokusera på webbsidans primära meddelande.
Det finns många faktorer som bidrar till en känsla av enhet inom en webbsida. Men innan du försöker tillämpa någon av dem, bör du se till att du förstår vad kärnan i designen är. Syftet med designen ska stödjas av den enhetliga designen som gör allt synligt kopplat och lättare att upplevas.
Låt oss nu förklara lite mer hur vart och ett av dessa faktorer kan utnyttjas för att skapa ett starkt förhållande mellan element.
Som vi redan har etablerat kan färg vara ett utmärkt sätt att bilda en koppling mellan objekt. Nästan allt plockar till ett färgschema - webbplats eller inte - eftersom det hjälper till att skapa ett förhållande, speciellt när det används i samband med en produkt eller någon annan enhet än en webbsida. Till exempel använder Coca-cola-webbplatsen (se nedan) primära röda och vita färger, samma som dess flaggskeppsprodukt. Därför kan vår användning av produkten omedelbart kopplas till webbplatsen på grund av dess färgkonsistens.
Enhet genom färg kan också genereras genom att bara se till att du följer ett definierat färgschema i dina mönster. Att inte vara konsekvent i detta avseende kommer att leda till en design som känns avskild eftersom en av de största inverkan på en visuell länk kommer att saknas. Vi kan till och med gå så långt för att säga att du kan skada din enhet om ditt val inte är relaterat till din typ av produkt, som hur gröna kan relateras till finansiering.
Återkommande element som ser ut som identiska bildar en anslutning eftersom din hjärna kommer att tänka, "hej jag har sett det förut!". Det skapar förtrogenhet inom designen så att dina användare inte är skyldiga att återuppta den specifika delen av din webbplats igen. Den förbinder sidorna genom deras likhet, så du fokuserar huvudsakligen på innehållet och meddelandet du vill trycka.
Naturligtvis är upprepningen av element inte den enda metoden att skapa enhet i din design. Att bara använda liknande faktorer (som färg eller typografi) kan koppla in elementen i din design eftersom de liknar varandra. Med samma färgschema kan samma gränsstil eller bara samma typsnitt bifoga sidorna eller objekten i din design.
För bättre förståelse, låt oss titta på en analogi. Vi kan titta på repetition från ett annat perspektiv: En hel del onda webbplatser replikerar en populär webbplats design så det verkar som användaren precis som en annan sida av en tjänst som de använder varje dag. En falsk Facebook-inloggningsskärm kommer att replikera färgschema och layout på Facebook.com så det verkar för den oskyldiga användaren, som en officiell sida från det sociala nätverket. Den oupptäckta användaren kommer inte att tänka två gånger eftersom deras hjärna inte är tvungen att återuppta dessa specifika element på sidan.
Att hålla en konsekvent anpassning bidrar till visuell enhet inom ett element. Att utforma runt en gemensam axel gör att element förefaller relaterade. En massa stycken med samma inriktning ser ut som om de är en del av en artikel, inte bara olika bitar av text som kastas ihop och äntligen ser organiserat och rent placerat.
Flera anpassningar kräver bara mer ansträngning för att skapa en anslutning, och det är bara alltför bättre att undvika att spendera tid på det.
Tänk på hur ett nät kan spela en roll i anpassning också. Som en begränsning som ett galler kan känna en ny formgivare, erbjuder den en solid grund för att du kan anpassa ett brett utbud av element till ett enda nät. Tänk på Squarespace webbplatsen nedan:
Lägg märke till hur det enkla tre kolonnretet gör en sida som är full av information till en snyggt utformad, välinriktad sida som känns enhetlig. Inte dåligt rätt?
Närhet är ett annat koncept som bidrar till den totala enheten i din design. När du trycker på element närmare blir de lättare införda som en. I ett försök att skapa en analogi kunde jag bara tänka på följande, om du hade en massa får tillsammans i ett fält, kan de kallas en besättning. Men om de var stationerade i olika fält kanske du inte genast känner igen dem som en del av samma mob (och det är en riktig kollektiv term för får). Kanske en mer passande analogi skulle vara att titta på två personer som vaknar ner på gatan, skrattar och pratar ihop. På grund av deras närhet till varandra kan vi gissa att de har ett tidigare förhållande av sorter.
När vi kommer att tillämpa detta på webbdesign, är det inte så annorlunda. Ju närmare elementen är tillsammans desto starkare är det förhållandet som användaren känner igen och ju bättre den enhet det skapar. Om vi går tillbaka ett ögonblick och uppskattar att all enighet verkligen innebär att samspelet mellan element kan vi känna igen att ett starkare förhållande korrelerar smidigt med nivån av interaktion och i den månen enhet.
Vi har en bra artikel här på Tuts + i visuell riktning och hur det kan påverka en design. I ett nötskal är det teorin att vi kan påverka en specifik riktning för en användare över en webbsida genom att skräddarsy vårt innehåll till det målet. I viss utsträckning kan vi använda visuell riktning i detta scenario för att hjälpa användare att flytta till ett annat element naturligt.
Jag driver kanske det lite här, men genom att införa denna typ av manipulation kan vi trycka in elementen på en sida för att skapa starkare bindningar, så du glider sömlöst mellan varandra men slår alla de områden som designern vill att du ska se. Detta förhållande kan användas i sammanhang för att rita användarens uppmärksamhet på en annan historia på din webbsida, eller eventuellt fortsätta läsa ner en sida. Du kan använda konceptet för att uppmuntra, medvetet naturligtvis någon att se och interagera med tweet-knappen eller "Lägg i varukorgen" en.
Konsistens i din webbdesign är en grundläggande princip som bidrar till enighet. Ett fotbollslag skulle inte gå ut och spela i skjortor med en annan färg per spelare. I stället förenas de som ett lag med en enda design som representerar deras varumärke (eller i det här fallet ett lag).
Konsistens uppnås genom att försöka hålla stilen på liknande element densamma och relaterar till teman som färg eftersom de är de faktorer som skapar framgångsrik konsistens. För att uppnå det finns det inte mycket att göra annat än att hålla sig till ett schema genom dina delar.
Enighet gör det bara att saker känns kopplade och tillsammans genom att de ser ut som de borde vara. En webbplats är en webbplats, inte en navigeringsfält, en sidofält, en logotyp och en del innehåll. Nej, istället är det en sak vi besöker: en webbplats.
Om vi emellertid har för många färger och teckensnitt, eller objekten dras bort, eller om inriktningen skiljer sig inuti din text, är obligationerna brutna och det känns inte ansluten längre. Du kanske frågar varför ska min design vara förenad? För att uttrycka det enkelt betyder det att användaren inte behöver bearbeta varje element, eller varje sida, varje gång de stöter på en ny, eftersom den är igenkännlig. Det förbättrar också resan över en sida eftersom menyn inte ser ut som om den ligger på ett annat territorium till innehållet.
Accentsconagua