Skalabilnost i vrste web dizajna. Skalabilnost i vrste web dizajna Gledajući srednji rezultat
Web stranice takođe imaju svoj kostur. Ali beskorisno je pitati doktore o njegovim karakteristikama. I veterinari također nisu svjesni strukture lokacije. Samo dizajneri izgleda znaju za ovo. O njima ovisi struktura kostura budućih resursa. A glavni način stvaranja kostiju njegovog kostura je raspored blokova.
Izgled web stranice zanat je za započete
Ima nešto misteriozno u izgledu web stranice. Ali to je sve dok bolje ne upoznate ovaj zanat. Započinjemo našu posvetu:
Sljedeća faza razvoja web stranice nakon kreiranja njenog izgleda je izgled. Zadatak dizajnera izgleda je prenijeti kostur budućeg web mjesta u virtualni svijet pomoću html koda i css tablica. Jednostavno rečeno, prenesite dimenzije i proporcije resursa u oblik koji je razumljiv pregledniku.
U procesu izgleda s html kodom, "kostur" web stranice je podijeljen na dijelove. I koristeći css ( kaskadni stilski listovi) postavlja veličinu svojih "kostiju", boju i lokaciju.
Postoji nekoliko vrsta izgleda:
I. Tabelarni - nekada je bio glavni tip rasporeda. U izgledu tablice, oznaka se koristi za postavljanje strukture web lokacije
i njegove podređene oznake. Raspored pomoću tablica omogućuje vam da sve elemente dizajna rasporedite na najrazmjerniji način jedan prema drugom. Ali u isto vrijeme ovaj se kod ispostavlja da je previše obiman:
Takođe, glavni nedostaci koda tabele uključuju njegovo dugo učitavanje i loše indeksiranje sadržaja od strane pretraživača.
Sadržaj stranice zasnovane na proračunskoj tablici neće se prikazivati dok se ne učitaju svi podaci. Raspored blokova vam omogućava da prikažete svaki učitani element zasebno.
Loše indeksiranje stranica tablice posljedica je velikih praznina između blokova teksta koji se nalaze u različitim ćelijama tablice.
Sada se tabelarni verst rijetko koristi kao glavna metoda za stvaranje web stranica. Sada se koristi samo za strukturiranje tabelarnih podataka i lokaciju grafičkih slika.
II. Blokiraj - trenutno glavna metoda rasporeda. Za razliku od tabličnog rasporeda blokova, on ima niz prednosti:
Odvajanje stila elemenata od html koda;
Sposobnost preklapanja jednog sloja na drugi - ova sposobnost uvelike olakšava pozicioniranje elemenata.
Bolje indeksiranje od strane tražilica;
Velika brzina učitavanja stranice koja se sastoji od međusobno nezavisnih elemenata;
Lakoća stvaranja vizuelnih efekata ( padajući meniji, liste, opisi alata).
Glavni nedostatak izgleda bloka je određeni „ dvosmislenost»Razumijevanje njegovog koda od strane različitih pretraživača. Stoga se html stranice često moraju "doraditi" pomoću posebnih hakova.
Pojavom blokovskog rasporeda rođen je koncept kao što je "kompatibilnost među preglednicima". Zbog razlike u prikazu istog elementa u različitim preglednicima, dizajneri izgleda moraju umetnuti čitave komade koda (hack) u glavni html.
Hakiranje je visoko specijalizirano i rješava problem pogrešnog prikaza u samo jednom pregledniku.
Glavni element koji se koristi u izgledu bloka je oznaka
... Dio koda odvojen ovom oznakom naziva se sloj. Sve odluke o oblikovanju premještene su izvan html koda u kaskadne stilske tablice. Pristupa im se putem ID -ova ili css klasa:
Kako funkcionira izgled bloka?
Prije početka izgleda, gotov psd izgled web stranice izrezuje se u blokove (slojeve) u grafičkom uređivaču. Isečene pozadinske slike stavljaju se u zasebnu fasciklu, koja će biti pričvršćena zasebno za svaki sloj:
Na primjer, uzmimo ovaj izgled web stranice, kreiran u Photoshopu. Prvo, u uređivaču teksta, koristeći div, postavljamo strukturu budućeg resursa i svakom sloju dodjeljujemo vlastiti birač id -a. Ispostavlja se sljedeća struktura:
Zatim do gotove strukture web stranice u html s linijom priložite css datoteku. Zatim mu dodamo opis stila svakog sloja, pozicioniranje u odnosu na ostale elemente i njegove dimenzije.
Možete saznati više o svim svojstvima css -a iz tehničke dokumentacije za jezik.
Ovako naš primjer blok izgleda web stranice izgleda u prozoru preglednika:
Naravno, ovaj primjer je samo vizualna pomoć koja pokazuje kako funkcionira raspored blokova. Pravi raspored je napravljen pomoću pozadinskih slika i logotipa uključenih u css. I sa uključivanjem hakova u html i css kôd za optimizaciju prikaza u svim preglednicima.
Istražujući prostranstvo weba, mnogi će vjerojatno primijetiti da je većina web stranica izgrađena na bazi mreže. Elementi ili blokovi na takvim stranicama nalaze se na stranici ne kaotično, kao što je bilo prije nekoliko godina, već u određenom slijedu i strukturirano (ponekad je to na prvi pogled neprimjetno). Ove stranice su dobro izbalansirane i izgledaju čisto i uredno. Mnogo zasluga za ovu urednost pripada grid, koji je u osnovi dizajna i pruža korisniku jasnu, neiskrivljenu strukturu web stranice.
Dok rešetke predstavljaju jednostavne presjeke vodoravnih i okomitih linija u određenim intervalima, mnogi ih dizajneri koriste za ukrašavanje i naglašavanje očiglednih geometrijskih oblika i vizualnih staza. Ove puteve i oblike možemo vidjeti na web stranicama portfelja, galerijama, blogovima i drugim kreativnim projektima. To ne čudi, jer mreža ima niz korisnih svojstava i prednosti, na primjer, kao što su:
Stvaranje vizualnih puteva za usmjeravanje korisnika
Kombinacija različitih komponenti u koherentnu cjelinu
Sortiranje informacija
I, naravno, mreža je savršena za pokazivanje ljepote ravnih linija. U nastavku smo pripremili stranice na kojima je mreža više od osnovnog dizajna.
Zaključak
Kao što je već spomenuto, mreža je sastavni dio dizajna i lako pretvara kaos u red, a u dizajnu web stranica, kao nigdje drugdje, ova je prilika zaista važna. Većina korisnika želi informacije brzo i jednostavno, a nema boljeg načina nego im predstaviti jasnu i dobro organiziranu strukturu.
Ne, to uopće ne znači da bi izgled stranice trebao biti linearan i jednostavan. Ponekad čak i jednostavni geometrijski oblici, vješto "razrijeđeni" bojama, slikama i grafikom (sjetite se ravnog dizajna), mogu biti zaista privlačni. Šta ti misliš? Ne izgleda li tako jasna podjela na blokove privlačna?
Zdravo, druže čitaoče!
Zašto su nam potrebne odredišne stranice u 10 blokova, ako su važne informacije na prvom ekranu i možete se ograničiti na odjeljke "O nama", "Usluge", "Cijene" i "Kontakti"? Odgovor je jednostavan: do privući pažnju kupca i motivisati stupiti u odnos s proizvodom inavesti na kupovinu proizvoda.
Najčešće korišteni tehnike angažovanja posetilaca u procesu kupovine proizvoda je AIDA(sa engleskog Attention-Interest-Desire-Action) i PMPHS(Pain-More Pain-Hope-Solution). Vođeni ovim tehnikama, izgrađena je logička struktura odredišne stranice i određuju se blokovi koji će biti prisutni na odredištu.
Prikupio sam za vas 20 ilustrativnih primjera blokova koji obavljaju određenu informativnu funkciju. Primjeri će vam dobro doći ako vi i olakšati komunikaciju s dizajnerom i dizajnerom vaše odredišne stranice.
U ovom ćete se članku upoznati s prvom polovicom - 10 blokova. Za preostalih 10 primjera, pričekajte sljedeći članak u kolovozu.
20 blokova za slijetanje - odaberite svoj
Sastavni dijelovi proizvoda, komplet;
Blok garancije (trostruke);
Blokirajte postignuća / prednosti vaše kompanije;
Blok o zaposlenima u kompaniji;
Blok o uslugama / odjelima kompanije;
Blok o partnerima / klijentima;
CTA (Poziv na akciju, Poziv na akciju);
Blok-prednosti klijenta od upotrebe vašeg proizvoda ("Zašto mi?");
Blokirati proces pružanja usluge (isporuka, način izvršenja transakcije);
Blok kalkulator;
Blok sa posebnom ponudom + vremenski ograničavač;
Blok sa poklonom + uslovi za primanje poklona;
Blok sa mapom lokacije kompanije ("Kako do tamo");
Blokirajte s kontakt podacima;
Tablica za usporedbu blokova;
Blokiraj identifikaciju "Za koga?";
Blokiraj FAQ.
* Numeracija blokova je približna - redoslijed blokova na odredišnoj stranici ovisi o niši. Redoslijed blokova možete odrediti pomoću istih Yandex Metrics alata (pomicanje karte, toplinska karta) ovaj članak će vam pomoći.
Sadrži ključne informacije za posjetitelja odredišne stranice, USP vaše kompanije. Poželjno je da i ove informacije budu konkurentne. Ovisno o niši, takve informacije mogu biti: cijena proizvoda (od 488 rubalja po komadu), vrijeme isporuke (isporuka u 2 dana), mjesto proizvodnje (direktno iz Njemačke). možete saznati više iz prethodnog članka.
Pogodan za: veleprodajne teme; niše u kojima kupac nije dovoljno svjestan prednosti proizvoda (uglavnom proizvoda).
Blok može biti odgovor na pitanje kupca "Zašto je toliko skup?" Ako sadrži detaljne opise karakteristika proizvoda. Time se želi stvoriti jasnija slika o objektu želje u glavi potencijalnog klijenta.
3. Blok-sastavni dijelovi proizvoda, komplet
Pogodan za: opisi složenih usluga; niše za organizaciju slobodnog vremena; opis paketa robe.
Ako blok o karakteristikama proizvoda u potpunosti prikazuje proizvod, tada blok o sastavnim dijelovima razlaže proizvod (proizvod ili uslugu) na pojmove.
4. Blokiranje garancija (trostruko)
Pogodan za: bilo koju odredišnu stranicu.
Najčešće se nalazi iza bloka s cijenom proizvoda. Izgrađen je na osnovu prigovora ciljne publike i zatvara ih, demonstrirajući prednosti usluge u vašoj kompaniji.
5. Blokirajte postignuća / koristi
Pogodan za: bilo koju odredišnu stranicu; brendirani proizvod poznate kompanije; posebno važno u visoko konkurentnoj niši.
Posebno važno za preduzeća u visoko konkurentnoj niši. Na primjer, ako više kompanija nudi isti proizvod, onda onaj koji pruža najpovoljnije uslove za transakciju i pokazuje kompetentnost rada svoje kompanije (od koje godine preduzeće postoji, broj realizovanih projekata, popuste i pokloni stalnim kupcima, broj prodajnih mjesta itd.).
6. Blok o zaposlenima u kompaniji
Pogodan za: niše u pružanju usluga
Upotreba se preporučuje u situacijama kada nije važno ŠTA kupac će primiti, i KAKO rezultat će biti postignut.
7. Blokirajte usluge / odeljenja kompanije
Pogodan za: složene teme usluga; odredišne stranice s više proizvoda u jednom području primjene.
8. Blokirajte partnere
Pogodan za: bilo koja odredišna stranica.
Blok povećava povjerenje posjetitelja ako koristite logotipe poznatih kupaca.
Pogodan za: info-poslovanje; uslužni sektor; niše u kojima je proces bitan (KAKO) dobijanje rezultata.
Odličan dodatak slučajevima - vizualna demonstracija BILO / BILO, kao i infografiku i ekrane za štampanje sa statistikom.
Niše u kojima je demonstracija važna:
Nastavlja se…
Danas smo razgovarali o prvih 10 blokova za odredišnu stranicu, objavit ćemo više u bliskoj budućnosti - pratite nas!
Nova godina donijela je mnogo svježih tehnologija i trendova, no najvjerojatnije će dominirati trendovi koji su se pokazali do kraja 2015. godine. Više video zapisa, rješenja s okomitim uzorcima, ideje inspirirane materijalom i elegantni slajdovi. Treba očekivati rast popularnosti ovih tehnika. Većinu novih koncepata nije tako teško implementirati. Ispod je 11 trendova web dizajna (i mnoge odlične web stranice s primjerima) s kojima ćemo se suočiti u 2016. Uzorci ovih dizajna zaista će vam pomoći da osjetite trend.
Stranica je atraktivna sa animiranom pozadinom, interaktivnim efektima
Lepša tipografija
Pojednostavljena sučelja otvorila su put ideji lijepe tipografije (kao i web alati jednostavni za korištenje poput Google Fontova i Adobe Typekita-proširujući razvojne mogućnosti s ogromnim mrežnim bibliotekama). Jednostavnost natpisa (čitljivih i lako razumljivih) u konceptu "kaligrafije" oslobađa prostor za druge elemente. Ono što biste trebali pokušati povezati je čitljivi font i zabavna novost opcija.
web stranica restorana u seoskom stilu: odmjerena i žurna, bez gužve (upečatljivi kontrasti) s dobro odabranim bojama i fontovima. Country stil (rustikalni stil) daje osjećaj bliskosti s prirodom. Brendiranje povezano s pticama grafički se odražava (ilustracije, pozadinski crteži). Općenito, ovo je dio identiteta - "Jastreb i kokoš", kao simbol uspješnog lova
Ilustracije i crteži
Ilustracije s crtežima unose kreativnu maštu i veselo raspoloženje u dizajn. Radi za sve vrste web stranica (ne samo za djecu). Popularnost "ilustriranog" stila također je porasla kada je u pitanju dizajn malih elemenata (ikona itd.) U dizajnu web stranice.
Ono što posebno raduje u ovom trendu je to što ilustracije dodaju ličnost web stranici. Budući da su ilustracije ili "ikone skice" najvjerojatnije ručno nacrtane, vizualno i općenito, takvo mjesto za korisnike izgleda više lično. Sa stanovišta razvoja trenda povećanja efikasnosti komunikacije s korisnikom, još je mnogo toga potrebno učiniti na ovom putu.
Stranica ima lijepe mikroliteracije i ilustracije. i "Baby-style" cijele web stranice pretvara dizajn u igru
Ranije je na Internetu bila rasprostranjena tabelarna vrsta izgleda kojoj je i posvećena. Međutim, s vremenom je ovaj pristup stvaranju strukture web stranice zastario i zamijenjen je izgledom bloka.
Razlike između blok i tabličnog izgleda
Ako izgled tablice implicira da se sadržaj stranice nalazi unutar oznake
, tada se koncept izgleda bloka temelji na aktivnoj upotrebi univerzalnih oznaka
unutar kojeg se nalazi sadržaj, uključujući i druge oznake.
Izgled bloka lišen je nedostataka izgleda tablice - pretraživači ga bolje indeksiraju, njegov kod nije tako raširen, a blokovi
, koji se tako vole nazivati "slojevima", prvobitno su bili zamišljeni kao univerzalni, odnosno "za sve", dok
je tablica koju trebate koristiti za prikaz tabelarnih podataka i ništa više.
Jedini zamjetljiv nedostatak izgleda bloka je to što se web stranice napravljene na njemu mogu prikazati na različite načine u preglednicima. Da biste to izbjegli, potrebno je da izgled učinite "unakrsnim", odnosno da ga svaki preglednik jednako prikazuje.
Suština izgleda bloka
Izgled web stranice kreira se u grafičkom uređivaču: označeno je gdje će se područje stranice (zaglavlje, dno, bočna traka, glavni sadržaj) nalaziti i koliko prostora za snimanje, slike i pozadine se pripremaju.
Svaki dio stranice smješten je u svoj blok
: vrh stranice - u prvom, izbornik - u drugom, sadržaj - u trećem itd. Svaki blok je ispunjen sadržajem pomoću HTML -a, te pozicioniran i stiliziran pomoću CSS oznaka.
Konačni HTML dokument je zbirka blokova
sa sadržajem unutra. Dizajn se često nalazi u zasebnoj CSS datoteci spojenoj na stranicu s oznakom. , ili barem u kontejneru
