18 eksempler på destinationssider med et interessant design og usædvanlige chips

Hovedproblemet ved de fleste moderne landinger - de synes alle at være lavet med en carbon copy. Og hvor er den kreative, ilden, hvor design frenzy?

I denne samling indsamlede jeg interessante stykker og usædvanlige effekter. Nogle af dem blev lavet af udviklere og webdesignere af Texterra, og nogle blev fundet i Runet åbne rum. Ikke uden eksempler på modbydeligt design og direkte shizy - i slutningen af ​​artiklen møder du med morderen Hamster og Snow Maiden med en spand.

Se, bliv inspireret, anvend dine favorit ideer i praksis, bland dem med din, og glem ikke at udføre A / B-test - dette er den eneste rigtige opskrift på at skabe dræbende destinationssider.

Udvidet formular

Normalt på en side skal du bruge standard ansøgningsskemaet med flere felter. Oftest skal kunden angive kontaktoplysninger - fornavn, efternavn, mail eller telefon. Men i nogle vanskelige områder bedre at åbne emnet mere detaljeret. Sådan blev det gjort i Texterra: i form af en destinationsside på dellservers.ru kan klienten vælge et modul, parametre, serveropgaver. Kan nulstille værdier, hvis noget gik galt.

Hvad er det for? Landingsejer vil alligevel få sine ledere - selvom der kun er to eller tre felter i formularen. Men klienten vil være interesseret i at grave dybere. Bestil ikke bare, men vælg din egen mulighed.

To knapper CTA

På destinationsplanen for task scheduler wunderlist.com/ru - to opkald til handling på én gang, som forstærker hinanden: "Opret en gratis konto" og "Download Wunderlist". Brugere klikker på begge links, konverteringen vokser, og destinationssiden gør sit job perfekt.

Specifikke tal (resultater)

Dette er ikke en ny, men stadig fungerende funktion. Vis dine kunder hvad du har opnået i tal: Dette er klarere end de abstrakte sætninger "vi er de bedste", "vi har hundredvis af færdige projekter" og så videre. Se på destinationssiden for smartprogress.do: Du kan straks se, hvor mange mennesker der allerede er tilmeldt projektet, hvor mange mål de har sat, hvor mange resultater de har opnået.

Vi tager landinger under hensyntagen til Centralasiens interesser og brugervenlighed. 7 dage - og landing er klar. Kontakt!.

Tilpasning

Faceless mønstrede landinger - br-r, hvad kunne være trist! Genoplive din en-side, tilføj brand, interesser en potentiel kunde. For eksempel på siden om oprettelse af Texterra-webstedet er der billeder af medarbejdere, der er direkte involveret i dette. Besøgende kommer ind og ser: aha, ikke abstrakte udviklere vil være involveret i min ressource, men helt i live Svyatoslav, Polina, Artyom og andre.

Praktisk svarformular

På mange landinger og steder kan du kun stille et spørgsmål via formularen. Det betyder, at du skal angive navn og efternavn, forlad telefonen og e-mail. Nogle gange skal du generelt indtaste captcha og koder - rædsel! Det er klart, at dette er gjort for at få ledere. Men der er en anden mulighed - som ved landingen "Cerebro Target." Hvis du er registreret i "VKontakte", behøver du ikke at udfylde noget - tag det og skriv. Og klienten er komfortabel, og ejeren er god - kontakten er tilbage, du kan fortsætte med at arbejde.

Kundeanmeldelser

Du kan bede kunder om at fortælle om deres indtryk og offentliggøre de modtagne tekster på destinationssiden. Men det er det, at den besøgende ikke vil tjekke ind på nogen måde - reelle svar eller falske. Det er bedre at gå videre og overbevise besøgende herom. På huskypark.info, som udviklede VelikaPlaza, leveres ordene fra Instagram-kunder med links til deres konti. Alt ærligt - gå og se.

Demonstration af resultater

Hipstamatic er en applikation, hvor du kan anvende forskellige filtre på fotos på din mobiltelefon. Landing er effektiv, først og fremmest fordi den viser smukke eksempler på billeder behandlet i denne ansøgning. Så brugeren ser straks resultatet og træffer hurtigt en købsbeslutning.

Parallax effekt

Parallax scrolling er en speciel effekt som følge af, hvilke baggrundsbilleder, der bevæger sig lidt langsommere end dem i forgrunden. Sådan er der på stedet valenkivodka.com. Proscroll Landing - en flaske vodka følger dig fra top til bund, langsomt bevæger sig. Magic bobler over hele baggrunden gør dig i stand til at huske det generøse nytårs fest. Mentalt viste sig!

animation

Generelt fungerer animationen meget. Flytning af billeder og objekter tiltrækker og holder brugerens opmærksomhed, leder deres blik til de vigtigste elementer på destinationssiden (knap CTA, timer, widget osv.), Erstatter teksten delvist. Et eksempel er på madwell.com. Følg linket - kæderne bevæger sig. Og ikke kun, at de bevæger sig - de lytter til enhver bevægelse af musen.

Opmærksomhed, spørgsmålet: Hvilken funktion udfører denne animation? Du kan svare i kommentarerne til artiklen.

illustrationer

Lad os ikke snakke banalt: Forfatterens illustrationer kan genoplive den mest rotte skabelon landing, alle ved det. Det er vigtigt, at billederne møder temaet for landing og forventningerne til målgruppen. Se: På hjemmesiden for sund baby mad marcandfisa.com er billeder stiliseret som børns tegninger. Et præcist hit i Centralasien - moms og dads, der køber produkter, skal gå.

Et andet eksempel på satellit-express.ru destinationsside. Illustrationen supplerer perfekt overskriften: "Det vigtigste med diabetes er at finde en balance."

Multilendingi

Landing tilbud ændres afhængigt af brugernes anmodninger. Scoret "sælge sommerhuset" - læs på stedet om sommerhuset. Scoreret "garage" - om garagen. Vi skrev mere om denne teknologi i artiklen om, hvordan man gør multi-ejer selv.

Her er et eksempel på multilending for firmaet Oviont, som vi gjorde.

Klienten planlagde at lave separate landingssider for tre produkter: kontorautomatiseringsværktøjer.

På den første skærm multilender er der korte beskrivelser af produkter. Hver blok med beskrivelsen er indrettet individuelt. Brugeren vælger det relevante produkt og fortsætter til den detaljerede beskrivelse.

For hvert produkt har vi lavet detaljerede afsnit. Den samlede mængde indhold på multimærkning er ca. 30.000 tegn. Hver side har detaljerede afsnit:

  • beskrivelse af funktionaliteten;
  • ekstra moduler;
  • Ofte stillede spørgsmål om brug;
  • satser;
  • anmeldelser.

Afsnittet "Tariffer" på siden af ​​hvert produkt fungerer forskelligt. På Kontur.Ekstern takstside kan en bruger f.eks. Læse beskrivelser af tre takstplaner, vælge en af ​​dem og abonnere på et eller to år.

Anvendelsen af ​​multilending i denne sag er berettiget, da den besøgende straks vurderer tre tilbud og vælger den rigtige. Hvis du repræsenterer hvert produkt på en separat destinationsside, vil nogle brugere ikke finde den, du har brug for med det samme, og vil ikke bestille.

Hover effekt

Når du svæver markøren, ændrer billederne farve, vokser, zoomer ind og ud. Dette gør landingen usædvanlig og gør opmærksom på dets individuelle elementer. Hvis du svæver markøren på linjen "Billeder og chat med huskies" - vises et foto af en hund. På linjen "Family arbor-grill" - det indre af denne arbor og så videre.

Split layouts

Split skærm eller split skærm - en meget effektiv design teknik. Pointen er at trække brugerens opmærksomhed på hver del af skærmen - så informationen ikke er helt tabt. Således kan du annoncere to produkter, to tjenester, to vigtige fordele og så videre. Sådan gøres det på baesman.com destinationsside.

3D grafik og forstørret virkelighed

Landing er designet til Qubi applikationen. Dette spil er for børn 3 + år og voksne. Essensen af ​​spillet er simpelt. I det første trin lim brugeren, ifølge den foreslåede ordning, et ægte papir-, karton- eller trækub.

Så installerer han applikationen, åbner den på smarttelefonen og "ser" ud i terningen gennem enhedens kamera.

På skærmen på en smartphone eller tablet kommer terningen til liv. Brugeren spiller i den tredimensionelle version af "Snake", "2048", "Labyrinth". I dette tilfælde skal du styre spillet ved hjælp af en ægte terning. For at styre terningen med to hænder, skal du bruge en speciel stativ til smartphone, som kan monteres af dig selv.

Den tredimensionelle model af terningen kan ses i illustrationen (gif).

Hvad kunden ønskede

Klienten bad om at lave en landing, som understreger funktionen i spillet: brugen af ​​tredimensionelle forstørrede virkelighed. Han ønskede især at se effekten af ​​bevægelige flader af en tredimensionel terning, hvis aktive ansigt er indskrevet på skærmen af ​​den besøgendes enhed.

Hvad vi gjorde

Vi implementerede 3D i CSS3 3D-transformationer. Overgangerne mellem kubens flader er lavet ved hjælp af ren JavaScript med spor af trække og røre begivenheder. Takket være de usædvanlige overgange mellem skærme skaber brugeren en følelse af tredimensionel skærm. Dette er særligt udtalt på arbejdsversionen af ​​destinationssiden.

Til den endelige version af landingen lavede vi en mere realistisk version af terningen. I modsætning til arbejdsversionen finder i den endelige kube-rotation sted udefra, ikke fra indersiden. Den tredimensionale følelse forbedres ved hjælp af headers animation.

Landing er fuldt adaptiv.

Interaktivt udvalg af indvendige og møbler maling farver

Den usædvanlige destinationsside "DSK.Color" er evnen til selvstændigt at vælge farve på møbler og interiørartikler ved hjælp af en interaktiv palette.

Virksomheden "DSK.Color" maler enhver overflade i forskellige farver. Du kan bestille farve af møbler, husholdningsapparater, cykler, musikinstrumenter og andre ting. Klienten kan vælge enhver farve.

Den mest populære service er maleriet af møbler og interiørartikler. Det tegner sig for omkring 80% af klientens arbejde.

Hvad kunden ønskede

Klienten bad om at lave et lyst og mindeværdigt Landing "med et opkald til at male alt omkring." Han havde ideer til at lave billeder af møbler i 3D-format, så den besøgende "kunne vende og se det farvede objekt fra forskellige sider."

Hvad vi gjorde

Vi tilbød kunden en ide: At give den besøgende mulighed for selvstændigt at vælge farve på møbler og interiørartikler.

For at gøre dette blev landingssiden tilbudt et billede af det rum, hvor den besøgende kan male hovedobjekterne med en pop-up-palette. Baseret på de valgte farver og elementer kan brugeren beregne omkostningerne ved tjenester. Den første prototype så sådan ud.

Klienten kunne virkelig godt lide ideen, så vi lavede en fungerende prototype af destinationssiden. På den så hovedparten sådan ud.

Vi blev enige med kunden om at forlade muligheden for at male bordet, stole, døre og køkkenudstyr. Dette er de vigtigste ting, som virksomheden maler.

Efter at have accepteret prototypen blev designeren og layoutdesigneren tilsluttet arbejdet. Den første skitse alle elementer i svg (dette er et grafisk format). Den anden har rullet og tilføjet en farvepalet til svg områderne. Derefter blev et modalt vindue implementeret. Med den kan brugeren dobbelttjekke farver og objekter og sende en anmodning om tjenesten.

Usædvanlige og almindelige preloaders

Ved hjælp af en preloader eller spinner kan enhver destinationsside gøres mere bekvem og visuelt attraktiv. I dette afsnit vil vi tale om preloaders og se på eksemplerne på disse elementer skabt af Texterra eksperter.

Hvad er en preloader og hvilke opgaver det løser

En preloader eller spinner er et tegn, der vises på skærmen, før siden indlæser. Du ser disse elementer dagligt, når du bruger internettet. Nedenfor er et eksempel på en preloader.

Preloader løser en praktisk opgave: informerer brugeren om, at siden indlæses, og erstatter også det visuelt utilpasende billede af downloadet. Dette skal præciseres.

På grund af de tekniske egenskaber i browsere er sider af websteder lastet ujævnt. Under læsning kan layoutet flyde. Hvis siden indlæses et par sekunder, ikke et delt sekund, ser brugeren et uinteressant billede et stykke tid.

Preloaders implementeres ved hjælp af standard front-end udviklingsværktøjer: HTML, CSS, JavaScript og yderligere biblioteker og rammer, for eksempel jQuery, React.

Hvordan vi forbedrer landinger med preloaders

Vi skaber unikke preloaders, herunder animerede. Her er nogle af vores værker.

  • Qubi

Til Qubi-landing lavede vi en preloader, der gentager navigationsmenuen. Dette giver brugeren mulighed for at forstå princippet om at styre siden, før den er indlæst.

  • Levellen

På Levellen Interiors hjemmeside brugte vi en preloader i form af et firmas logo. Dette er et ekstra element i site branding.

  • Whalenet

På hvalandslandsiden kan du se en spinner i form af et turkis rektangel.

  • Parielle

Parielle-webstedet har en klassisk cirkelformet preloader.

  • Projectto

På Landing Projectto brugte en preloader i form af et rektangel.

Preloaderens udseende bliver normalt diskuteret i designfasen af ​​destinationssiden.

Interaktiv

På landingssiden for forretningsstedet i Fidel er muligheden for at se på gratis kontorer og ansøge om leje usædvanligt implementeret.

Hvordan landing virker

Landing giver oplysninger om leje af lokaler i et forretningscenter. Hovedhemmeligheden for destinationssiden findes i afsnittet "Kontorer". Her kan brugeren se tilgængeligheden af ​​gratis kontorer på hver etage af bygningen.

Når du svæver markøren på et gratis kontor, vises "Detaljer" -knappen op.

Ved at trykke på knappen leder brugeren til siden med oplysninger om kontoret og dets fotos. Fra denne side kan du efterlade en anmodning om udlejning af lokaler.

Funktioner af implementeringen

Vores designer tegner formularerne for kontorlokaler, tegningerne er lavet i svg-format. Disse tegninger er overlejret på gulvplanerne. Når webstedsadministratoren i kontrolpanelet bemærker at kontoret er gratis, indeholder scriptet et billede på planen og evnen til at gå til siden med information og ordreformular. Når administratoren bemærker, at kontoret er optaget, deaktiverer scriptet billedet af billedet på planen.

Korrekt design

I dette eksempel er der ingen komplicerede tekniske chips og designeffekter - hele landingen tager et smukt billede: baggrund, farver, lækre billeder af Astrakhan kaviar. Odnostranichnik astrahancaviar.ru - Et godt eksempel på, hvordan en designer ønsker at købe et produkt. Og spis straks!

Endelig, om sår - et par eksempler på forfærdelige landinger. Til kontrast, feyspalma, impotent smerte og alt det. Jeg vil ikke beskrive, hvad der er forkert i dem - jeg foreslår at du selv løser disse problemer. Ita-a-ak ...

Skriv i kommentarerne, at dette ikke er tilfældet med disse destinationssider :-) Nå, hvis landingsplanudvikling er nødvendig, udfyld formularen. Lad os ringe, vi vil høre, vi hjælper med at beslutte funktionalitet.

Efterlad Din Kommentar