Mobil design får mig att skissera mer vertikalt. Och jag tror inte att det bara är jag.
Jag ser fler och fler webbplatser över plattformar som innehåller mer vertikala komponenter i sin övergripande design. Glöm? Ovanför scrollen? låt oss prata om att gå vertikalt.
Horisontell kontra vertikal design
Under lång tid har webbdesign utformats kring en ganska distinkt? Ovanför scrollen? mentalitet. Att designa för tabletter och mobila enheter kräver att du ändrar standardinriktningen och att alla de välutrustade mobila sidorna där ute verkligen lägger till ett vertikalt inflytande för designprojekt, både online och i tryck.
Många av samma grundläggande principer gäller om du arbetar horisontellt eller vertikalt. Ren typografi, en stark färgpalett och bilder, och den övergripande organisationen är viktig.
Att designa i ett vertikalt utrymme är dock inte ett nytt koncept. Utskriftsdesigners har gjort det i flera år - tänk på tidningar och tidskrifter som klassiska exempel. Det nya är den nästan obegränsade vertikala möjligheten. I vertikala webbprojekt kan du förlänga djupet så långt du vill (även om det inte alltid rekommenderas).
Skapa ett vertikalt utrymme
Ibland skapar den första utmaningen ett vertikalt utrymme som passar ditt projekt. Det kommer att hända nästan som standard när man arbetar på något projekt som innehåller en mobil motsvarighet, men hur är det med webbplatsen själv? (Detta, i den nuvarande webbläsarmiljön, kommer aldrig att få en konsekvent vertikal form.)
Om du har en blogg eller en webbplats med en sidofält kan ditt arbetsområde redan vara mer vertikalt som du tror. Betona den formen med andra vertikala delar, till exempel en stark upp och ner bild eller ett kort textblock som läser vertikalt.
Ett annat alternativ är att förlänga ditt utrymme bortom rullningen. Skapa cascading? Skärmar? som navigeras från topp till botten. Detta är ett koncept som frowned på under en tid men det går igen på grund av att användarna har omskolats? att bläddra igenom en webbplats tack vare det stora antalet mobil- och surfplattformar som fungerar på så sätt.
Du kan också planera din design runt flera vertikala mellanslag genom att skapa ett rutnät med flera breda kolumner. I den här konfigurationen har varje kolumn ett distinkt syfte (ungefär som ett sidofält) som skapar en vertikal arbetsyta. Du kan skapa en vertikal arbetsyta för en kolumn genom att minska bildbredden på din arbetsyta och fylla resten med en bakgrundsbild.
Nyckeln är inte att tvinga den. Ibland kan du inte göra ett vertikalt rymdarbete. Om du inte kan designa med en helt vertikal orientering, försök använda några vertikala designelement, till exempel navigeringsstänger eller bilder, inom din övergripande design.
Använda vertikala element
Ibland planerar en vertikal design att det är mer än bara det övergripande utrymmet. Överväg att använda vertikala element i ett horisontellt utrymme för att skapa en upp-och-ner-känsla. Experimentera med vertikala bilder eller långa, tunna textblock. Men tvinga det inte igen; Dessa verktyg är bara effektiva om de arbetar med (inte emot) ditt innehåll.
Skapa statiska element, till exempel navigeringsstänger eller logotyper, också vertikalt. Kom bara ihåg att strukturera dessa element så att de är användbara. Navigationsfält fungerar bäst för en rullningslayout när de inte är för djupa och flyttar med sidan som användarna navigerar. (Du vill inte att användarna blir frustrerade och försöker hitta saker.)
Du kan också använda färg för att skapa en mer vertikal känsla för din webbplats. Tänk på bakgrunden - vertikala ränder kan lägga till en? Längre? känna när de placeras bakom andra objekt.
Vertikal design i åtgärd
Utskriftsdesign har åberopat sig på en vertikal duk i hundratals år. Några av de mest kända publikationerna - New York Times, USA Today, Vogue and People - har format som är längre än de är breda.
Men det slutar inte där. Filmaffischer är ett av de mest kända exemplen på vertikalt orienterade designprojekt.
Allt fler visitkort, trots att de oftast skrivs ut horisontellt, tar ett vertikalt format. Varför? Eftersom det får dem att sticka ut bland hundratals andra i stacken. Detsamma gäller för andra tryckta reklammaterial som magneter och klistermärken. För utskriftsprojekt kan beslutet att använda vertikal orientering när de flesta andra arbetar horisontellt verkligen lägga till lite pop och känsla för projektet.
Vertikala överväganden
? Vertikala layouter kan bli viktiga och svåra att navigera i bråttom.?Vertikala layouter kan bli viktiga och svåra att navigera i bråttom. Var noga med att ge stor vikt åt rubriker och navigationsverktyg när du utformar i ett vertikalt utrymme så att din användare (eller läsaren) inte tappar bort vad de tittar på.
Du kan överväga att göra text några punkter större (och med ytterligare ledande) när du använder ett vertikalt format och du kommer sannolikt att inkludera navigationsenheter (oavsett om de är rullfält eller beskrivningar) som följer användaren via webbplatsen.
Var också försiktig med det horisontella utrymmet i den vertikala layouten. Motstå frestelsen att tvinga en horisontal stil i ett annat utrymme; det kommer sannolikt att bli kort. Du vill inte blanda andra element tillsammans för att få dem att passa in i ett smalare utrymme. Titta på sätt att omorganisera eller stapla element så att arbetsytan inte känns trångt.
Vertikal kärlek
Här är några webbplatser som tar det vertikala konceptet och körs.
Aktivera
Webbplatsen är byggd vertikalt och de hjälper dig att navigera genom att använda rullningen till? Öppna? flaskan och resten av platsen. (Det blir aldrig gammalt.)
Enviro Homes
Den här navigeringsfältet högst upp på den här vertikalt baserade webbplatsen justerar så att du alltid har den perfekta visuellt på din datorskärm.
Lotta Nieminen
Den här webbplatsen använder vertikala kolumner för att skapa form.Blandningen av rektanglar uppmuntrar dig att flytta igenom sidan.
100% ren Nya Zeeland
Om du rullar ner den här sidan skapas en videoeffekt som låter dig se mer av Nya Zeeland.
Slutsats
Jag älskar återuppkomsten och tonvikt som mobila koncept har på vertikalt orienterade projekt. Ändra användarmiljöer och uppkomsten av responsiv design påverkar också denna trend.
Sammantaget är designen vertikalt inte helt annorlunda än dess horisontella motsvarighet. Det kan vara lite ovanligt i början, men genom att använda samma verktyg och koncept som relaterar till bra design i ett horisontellt schema kan du skapa bra vertikala projekt. Om du är orolig för resultatet, börja små och utveckla några vertikala delar för att integrera i ett projekt innan du går helt vertikalt. Du kan bara hitta hur mycket du tycker om den nya vyn!
Bildkällor: Illyissimo, Food Sense, Simon Collison och Spigot Design.