7 unika designbeslut
Jag letar alltid efter inspiration, för stor design som utmanar konventionen. Det här inlägget handlar om unika layoutlösningar. det betyder att jag kommer att prata om åtta olika webbplatser som presenterar något typiskt, på ett unikt sätt. Vi går över unika layoutlösningar från att visa produkter, att integrera personliga och mänskliga element på en webbplats.
1. Harvard återvinner den ökända karusellen
Harvards Designskola Webbplatsen har ett unikt sätt att närma sig navigering. När du först landar på hemsidan finns en visuell visning av navigeringen. Naturligtvis är varje länk inte representerad här, bara några viktiga. Många webbplatser har anknutit till att länka till de viktigaste sidorna i huvudsidan på hemsidan. det är det som förde oss till exempel karuseller. Men jag har ännu inte sett en annan hemsida presentera den på så sätt. Navigationen kan vara liten men den är främre och mitten. Ännu viktigare, det verkar som om det hör hemma där. Det exekveras exakt.
Bilderna till vänster överlappar varandra, men du kan fortfarande se hur många är där. Det finns ett tydligt förhållande mellan bilden och titlarna på vänster sida. Bilderna roterar i förhållande till objekten till vänster. Men vid vilken tidpunkt vet du vilken information som finns tillgänglig för dig. Det är som om Harvards Design School skapade en förbättrad version av vad karusellen borde ha varit i första hand. Inte bara användbarheten tas allvarligt i denna designlösning, layouten är också unik. Båda dessa faktorer kombinerar för en fantastisk visuell design.
2. Tra går av gallret
Det är helt uppenbart att Tra S hemsida använder en icke-traditionell layout. Webbsidan är totalt sett minimal. De använder också ett omvänd färgschema där bakgrunden är svart och texten är vit. Färgschemat ger verkligen en wow-faktor. Det handlar dock om layouten på Tras hemsida. Låt oss börja med hemsidan: det finns några stycken text på hemsidan, överlappar det överhuvudtaget bakgrundsbilden åtminstone lite, med undantag för styckkopian från avsnittet "Vi känner till människor". Kopian är anpassad specifikt för att vara borta från bilden. Det är annorlunda, det är unikt, det är märkbart.
På omsidan finns det lite mer order och användning av ett nät. Men nätet är fortfarande oregelbundet. Det verkar som om varje del av den ungefärliga sidan har sitt eget rutnät. Det som fascinerade mig mest om den här sidan är den avskurna bilden längst upp till vänster på webbsidan. Det passar bara inte in i någonting. Naturligtvis gör det mig nyfiken. Det visar sig att bilden är ett galleri-du måste klicka på det för att göra bilderna öppna. Det är ett ganska smart sätt att utnyttja en layout; människor som bryr sig att undersöka belönas med en massa bilder. De människor som bryr sig inte, förlorar inte lika mycket. Det är ett roligt påskägg.
3. Rullbara skofoton på en fast sida
Detta exempel på en unik layoutlösning kretsar kring en online-shopparhandlare. Feit S produktsida är bara lysande. Först och främst använder designen hela skärmens bredd och höjd. Det betyder att varje område på skärmen har utsetts med ett visst syfte. För det andra är webbplatsen enkel, minimal och ren. Det betyder att trots att designen använder hela skärmen är det inte rörigt. Det är en mycket bra sak eftersom massor av design bygger på whitespace för att skapa en ren och lätt utseende webbplats.
Det som imponerade mig mest om den här specifika produktsidan är hur layouten är uppdelad. Sidan är indelad i tre olika sektioner. Först finns det navigeringen på vänster sida. Det är ganska standard och inget för speciellt. Sedan finns det högra sidan med produktdetaljerna. Både, vänster sida navigering och detaljer avsnittet är fast på skärmen. Men den sista delen, den mellersta bildavsnittet, är fylld med rullbara bilder. Jag tycker att det är en lysande lösning eftersom det inte är den vanligaste lösningen.
Ofta, om det finns en stor lista över produktfoton, ligger informationen om den kvar. Här, när jag rullar ner ser jag fortfarande beskrivningen och namnet på produkten, jag ser fortfarande de olika färgerna som den kommer in och kan komma åt mer information, till exempel detaljer om materialet som jag vill utan att behöva rulla upp och ner. Sammantaget är detta en sömlös upplevelse för en potentiell kund.
4. Visar av flera sidor av en produkt vid en enda blick
Här har vi en annan produktsida och ett annat sätt att visa en produkt. Okej, vi har också ett annat sko exempel! Afu-Ra S hemsida har också en unik visningsmetod. Den här gången visas skorna i flera olika bilder längst upp på sidan. Det är faktiskt en del av ett karusell-UI-element. Men användbarheten här är inte en stor fråga. Till att börja med finns tre bilder som standard på en stationär eller bärbar skärmstorlek. Standardbilderna har alla samma bakgrund som gör en fin och sömlös skärm. Om en användare inte inser att bilderna är en del av en karusell så kommer de åtminstone att se tre olika bilder av produkten på sina datorer. För mindre skärmstorlekar som tabletter är standardvisningen två bilder i taget. Det är fortfarande ganska bra. Sammantaget är skonprodukterna här en unik designlösning.
5. Opendoor visar sina människor
Jag tror att webben är en opersonlig plats där vi vanligtvis inte ser människan. det verkliga folket bakom appar, produkter, företag och så vidare. Jag har alltid strävat efter att inkludera ett mänskligt element inom mina mönster. Jag kan se att Öppen dörr vill göra exakt samma sak. På deras hemsida, ungefär halvvägs, är ett avsnitt som heter "Vi har din rygg." Det ska förklara att det finns verkliga människor bakom Opendoor-företaget som är där för att hjälpa sina kunder varje steg på vägen. Nu hade Opendoor precis lämnat det där men istället lade de ett stort foto av en av sina anställda.
Det här avsnittet har mycket liten text. I stället är bilden och ansiktet större delen av avsnittet. Jag skulle till och med säga att fotot överstiger sektionen på 100% positivt sätt. Om bilden hade varit en miniatyr eller en avatar, skulle effekten inte ens existera. Om fotot hade varit en medelstorlek (säga minst 300px med 300px) intill kopian, skulle effekten inte vara densamma. Valet att använda en så stor bild av Marks vänliga ansikte var ett bra samtal; inte bara ger detta designbeslut ett personligt och personligt designelement, det är också en kreativ idé. Utan detta foto skulle det inte vara någon personlig inverkan på användaren. Utan denna specifika layout skulle detta avsnitt ha en helt annan känslomässig effekt.
6. UX Flow visar lite animering kan gå långt
Detta nästa exempel på en unik layoutlösning har att göra med animering. Om du tittar på hemsidan för UX Flow och rulla ner lite kan du märka att en av avsnittets bakgrunder animerar in. Det är ärligt inget fancy men det är unikt. Bakgrunden lindrar inte in när du rullar på en webbsida. Om något, under de senaste åren har vi sett olika element från en sektion flyga in eller ut när du rullar. Men jag har inte tyckt att många bakgrundsanimationer förutom parallax. Anledningen till detta är viktigt att en bakgrund definierar en sektion. Och även om detta inte är någon galen animation är det fortfarande imponerande.
Inte allt måste vara djärvt, högt och motbjudande att vara imponerande. Ibland är de subtila saker som en liten och snabb, enkel animering bara tillräckliga för att ge en unik upplevelse för en användare. Detta är definitivt en av dessa tider. En annan sak som är viktigt att märka är att de sektioner mellan vilka animeringen händer inte har några unika layouter själva. Det är okej; Övergången är märkbar när du går från en sektion till nästa, det är fortfarande en del av layouten, även om det inte är slutlayouten som skapats av animationen.
7. Ted Todd integrerad karta
Den visuella designen och den övergripande användarupplevelsen av Ted Todd S hemsida är väl utformad. För denna artikels skull vill jag prata om hur Ted Todd använder plats- och kartavsnittet på deras hemsida. Mot botten av deras hemsida finns en sektion som är utsedd för de olika kontorslokalerna som företaget har i hela Florida. Det finns flera anledningar till varför detta avsnitt är fantastiskt. För det första använder avsnittet layouten på ett unikt sätt för att ge en stellar designlösning. Den mest märkbara saken om detta avsnitt är den lätta formen av Florida till höger. Den visuella av Florida med sina många prickar är ett fantastiskt sätt att visa upp företagets räckvidd. De säger inte bara att de är i Florida, designen visar dig exakt var. Det är en lätt synlig att smälta och den är också utförd på ett fantastiskt sätt.
Nästa viktiga sak om detta avsnitt är prickarna. De är faktiskt interaktiva. När du svävar över dem får du namnet på den stad eller stad Ted Todd försäkringskontoret ligger i. Men om du klickar på det hela skiftar hela delen till vänster för att göra plats för detaljer om det specifika kontoret. Du får kontors telefonnummer, adress, öppettider utöver en lista över anställda. Jag gillar den här designlösningen eftersom den tillåter en användare att snabbt navigera till en plats nära dem. Det är visuellt mycket mer intressant och unik representation än om informationen staplades ovanpå varandra på en sidtitel "Our Florida Offices", tror du inte?
