Škálovateľnosť a typy webdizajnu. Škálovateľnosť a typy webdizajnu Pozeráme sa na priebežný výsledok
Stránky majú aj svoju kostru. Ale je zbytočné pýtať sa lekárov na jeho vlastnosti. Áno, a veterinári tiež nevedia o štruktúre stránky. Toto je známe iba dizajnérom rozloženia. Práve na nich závisí štruktúra kostry budúceho zdroja. A hlavným spôsobom, ako vytvoriť kosti jeho kostry, je blokové usporiadanie.
Rozloženie webových stránok je remeslo pre oddaných
V rozložení stránky je niečo tajomné. To je však dovtedy, kým toto remeslo lepšie nespoznáte. Začnime naše venovanie:
Ďalším krokom vo vývoji stránky po vytvorení jej rozloženia je rozloženie. Úlohou dizajnéra rozloženia je preniesť z pomocou html css kód a tabuľky kostry budúceho webu vo virtuálnom svete. Jednoducho povedané, preneste veľkosť a proporcie zdroja do formy, ktorá je zrozumiteľná pre prehliadač.
V procese rozloženia pomocou html kódu sa „kostra“ stránky rozloží na časti. A s css
(kaskádové štýly) sú nastavené rozmery jeho „kostí“, farba a umiestnenie.
Existuje niekoľko typov rozloženia:
I. Tabuľková - predtým bola hlavnou metódou rozloženia. V tabuľkovom rozložení sa tag používa na nastavenie štruktúry webu.
a jej podriadené značky. Rozloženie pomocou tabuliek vám umožňuje čo najproporcionálnejšie usporiadať všetky prvky dizajnu navzájom. Zároveň sa však tento kód ukazuje ako príliš objemný:
Medzi hlavné nevýhody tabuľkového kódu patrí jeho dlhé načítanie a zlé indexovanie obsahu. vyhľadávače.
Obsah tabuľkovej stránky sa nezobrazí, kým sa nenačítajú všetky údaje. Rozloženie blokov umožňuje zobraziť každý načítaný prvok samostatne.
Zlé indexovanie tabuľkových strán sa vysvetľuje veľkými medzerami medzi blokmi textu umiestnenými v rôznych bunkách tabuľky.
Teraz sa tabuľkový verst zriedka používa ako hlavná metóda vytvárania stránok. Teraz sa používa iba na štruktúrovanie tabuľkových údajov a usporiadanie grafických obrázkov.
II. Blokovať - in tento moment je hlavná metóda rozloženia. Na rozdiel od tabuľkového rozloženia blokov má rad výhod:
Možnosť prekrytia jednej vrstvy na druhú - táto funkcia výrazne uľahčuje umiestnenie prvkov.
Lepšie indexovanie vyhľadávacími nástrojmi;
Vysoká rýchlosť načítania stránky pozostávajúca zo vzájomne nezávislých prvkov;
Jednoduchosť tvorby vizuálne efekty (rozbaľovacie ponuky, zoznamy, popisy).
Hlavnou nevýhodou blokového usporiadania je určitý " nejednoznačnosť» pochopenie jeho kódu rôznymi prehliadačmi. Preto sa často html stránka musí „dokončiť“ pomocou špeciálnych hackov.
S príchodom blokového usporiadania sa zrodil taký koncept ako „kompatibilita medzi prehliadačmi“. Kvôli rozdielu v zobrazení toho istého prvku v rôznych prehliadačoch musia dizajnéri layoutu vkladať celé kusy kódu (hacky) do hlavného html.
Akcia hacku je vysoko špecializovaná a rieši problém nesprávneho zobrazenia iba v jednom prehliadači.
Hlavným prvkom použitým v rozložení bloku je tag.
. Úsek kódu oddelený touto značkou sa nazýva vrstva. Všetky rozhodnutia o štýle sa preberajú z html kódu do kaskádových štýlov. Sú prístupné prostredníctvom ID alebo tried css:
Ako funguje rozloženie blokov?
Pred spustením layoutu sa hotový psd layout stránky rozreže v grafickom editore na bloky (vrstvy). Vystrihnuté súbory sú umiestnené v samostatnom priečinku. obrázky na pozadí, ktorý bude pripevnený samostatne ku každej vrstve:
Vezmime si napríklad toto rozloženie webovej stránky vytvorené vo Photoshope. Prvý v textový editor pomocou div nastavíme štruktúru budúceho zdroja a každej vrstve priradíme vlastný selektor ID. Ukazuje sa táto štruktúra:
Potom do hotovej štruktúry webu v html s riadkom priložiť súbor css. Potom k nej pridáme popis štýlu každej vrstvy, umiestnenie vzhľadom na ostatné prvky a jej rozmery.
Zistite viac o všetkých vlastnosti css Môžete to urobiť v technickej dokumentácii pre daný jazyk.
Takto vyzerá náš príklad blokového rozloženia stránky v okne prehliadača:
Samozrejme, tento príklad je len vizuálna pomôcka, ktorá demonštruje, ako funguje usporiadanie blokov. Skutočné rozloženie sa vyskytuje pomocou obrázky na pozadí a logá zahrnuté v css . A tiež so zahrnutím hackov v html a css na optimalizáciu zobrazenia vo všetkých prehliadačoch.
Pri skúmaní rozlohy siete si mnohí pravdepodobne všimnú, že väčšina lokalít je postavená na princípe siete. Prvky alebo bloky na takýchto stránkach sa na stránke nenachádzajú náhodne, ako to bolo pred niekoľkými rokmi, ale v určitom poradí a štruktúrovane (niekedy to nie je na prvý pohľad viditeľné). Tieto stránky sú dobre vyvážené a majú tendenciu vyzerať čisto a upratane. Veľká časť zásluh tejto úhľadnosti patrí mriežka, ktorý je základom dizajnu a poskytuje používateľovi jasnú, neskreslenú štruktúru stránok.
Hoci mriežky zvyčajne predstavujú jednoduché priesečníky horizontálnych a zvislé čiary v stanovených intervaloch ich mnohí dizajnéri používajú ako ozdoby a na zvýraznenie zjavných geometrických tvarov a vizuálnych ciest. Tieto cesty a tvary môžeme vidieť na stránkach portfólia, galériách, blogoch a iných kreatívnych projektoch. To nie je prekvapujúce, pretože mriežka má množstvo užitočných vlastností a výhod, ako napríklad:
Vytváranie vizuálnych ciest na vedenie používateľov
Spojenie rôznych komponentov do jedného celku
Triedenie informácií
A samozrejme, mriežka je najlepší spôsob, ako demonštrovať krásu priamych čiar. Nižšie sme pre vás pripravili webové stránky, v ktorých je mriežka viac ako len dizajnový základ.
Záver
Ako už bolo spomenuté, mriežka je neoddeliteľnou súčasťou dizajnu a ľahko mení chaos na poriadok a v dizajne webových stránok je viac ako kdekoľvek inde táto funkcia skutočne dôležitá. Väčšina používateľov chce informácie rýchlo a jednoducho a nie lepšia cesta než ich prezentovať s jasnou a dobre organizovanou štruktúrou.
Nie, to vôbec neznamená vzhľad Stránka by mala byť lineárna a jednoduchá. Niekedy dokonca aj jednoduché geometrické tvary, zručne „preriedené“ farbami, obrázkami a grafikou (pamätajte na plochý dizajn), môžu byť skutočne atraktívne. Co si myslis? Nevyzerá takéto jednoznačné rozdelenie do blokov príťažlivo?
Dobrý deň, súdruh čitateľ!
Prečo potrebujeme vstupné stránky v 10 blokoch, ak dôležitá informácia je na prvej obrazovke a môžete sa obmedziť na sekcie „O nás“, „Služby“, „Ceny“ a „Kontakty“? Odpoveď je jednoduchá: na absorbovať pozornosť nakupovať a motivovať vstúpiť do vzťahu s produktom apovzbudiť vás ku kúpe produktu.
Najpoužívanejšie techniky zapojenia návštevníkov v procese nákupu produktu je AIDA(z angl. Attention-Interest-Desire-Action) a PMPHS(Bolesť-Viac bolesti-Nádej-Riešenie). Na základe týchto techník človek stavia logická štruktúravstupná stránka a určiť bloky, ktoré budú prítomné na pristátí.
Zozbieral som pre vás 20 vizuálnych príkladov blokov plnia špecifickú informačnú funkciu. Príklady sa vám budú hodiť, ak vy, rovnako ako uľahčiť komunikáciu s dizajnérom a dizajnérom vašej vstupnej stránky.
V tomto príspevku sa zoznámite s prvou polovicou - 10 blokmi. Zvyšných 10 príkladov je v ďalšom článku v auguste.
20 pristávacích blokov - vyberte si ten svoj
Blokové komponenty produktu, zariadenia;
Blokové záruky (trojité);
Blok o úspechoch/výhodách vašej spoločnosti;
Blok o zamestnancoch spoločnosti;
Blok o službách/oddeleniach spoločnosti;
Blokovať o partneroch/klientoch;
CTA (Call-to-action, call to action);
Blokové výhody klienta z používania vášho produktu („Prečo my?“);
Blok o procese poskytovania služby (doručenie, spôsob transakcie);
Bloková kalkulačka;
Blok s akciou + časový limit;
Blok s darčekom + podmienky prijatia darčeka;
Blok s mapou umiestnenia spoločnosti („Ako sa tam dostať“);
Blok s kontaktnými informáciami;
Tabuľka porovnávania blokov;
Identifikácia bloku "Pre koho?";
Časté otázky o blokovaní.
*Číslovanie blokov je približné - poradie blokov na vstupnej stránke závisí od výklenku. Poradie blokov môžete určiť pomocou všetkých rovnakých nástrojov Yandex Metrica (, posúvacia mapa, klikacia mapa), tento článok vám pomôže.
Obsahuje kľúčové informácie pre návštevníka pristátia, USP vašej spoločnosti. Je žiaduce, aby tieto informácie boli aj konkurencieschopné. V závislosti od výklenku môžu byť tieto informácie: cena produktu (od 488 rubľov za 1 kus), dodacia lehota (dodanie do 2 dní), miesto výroby (priamo z Nemecka). Viac podrobností nájdete v predchádzajúcom článku.
Vhodné pre: veľkoobchodné témy; výklenky, kde kupujúci nie je dostatočne informovaný o výhodách produktu (hlavne produktu).
Blok môže byť odpoveďou na otázku kupujúceho „Prečo je to také drahé?“ Ak podrobne popisuje vlastnosti produktu. Je to potrebné na vytvorenie jasnejšieho obrazu o predmete túžby v hlave potenciálneho klienta.
3. Blokové komponenty produktu, zariadenia
Vhodné pre: popisy komplexných služieb; výklenky na organizovanie voľného času; popisy produktov.
Ak blok o vlastnostiach produktu ukazuje produkt ako celok, potom blok o komponentoch rozkladá produkt (tovar alebo službu) na komponenty.
4. Bloková záruka (trojnásobná)
Vhodné pre: akúkoľvek vstupnú stránku.
Najčastejšie sa nachádza po bloku s nákladmi na produkt. Je postavená na základe námietok cieľového publika a uzatvára ich, čím demonštruje výhody služby vo vašej spoločnosti.
5. Blok úspechov/prínosov
Vhodné pre: akékoľvek pristátie; značkový výrobok od známej spoločnosti; obzvlášť dôležité vo vysoko konkurenčnom výklenku.
Zvlášť dôležité pre podniky vo vysoko konkurenčnom výklenku. Napríklad, ak niekoľko spoločností ponúka rovnaký produkt, potom ten, kto poskytuje najvýhodnejšie podmienky pre transakciu a preukazuje kompetenciu svojej spoločnosti (od akého roku spoločnosť existuje, počet realizovaných projektov, zliav a darčekov pravidelne zákazníkov, počet predajných miest a pod.).
6. Blok o zamestnancoch spoločnosti
Vhodné pre: servisné výklenky
Užitočné v situáciách, keď je dôležité nerobiť ČO kupujúci dostane AKO výsledok sa dosiahne.
7. Blok o službách / oddeleniach spoločnosti
Vhodné pre: témy komplexných služieb; vstupné stránky s niekoľkými produktmi v jednej oblasti použitia.
8. Blokujte partnerov
Vhodné pre: ľubovoľná vstupná stránka.
Blok zvyšuje dôveru návštevníka, ak sú použité logá známych klientov.
Vhodné pre: info-biznis; služby; výklenky, kde záleží na procese (AKO) získanie výsledku.
Skvelý doplnok k puzdrám - názorná ukážka BOL / HAS BEEN, ako aj infografiky a printscreeny so štatistikami.
Výklenky, kde je dôležitá demonštrácia:
Pokračovanie nabudúce…
Dnes sme diskutovali o prvých 10 pristávacích blokoch, ďalšie zverejníme v blízkej budúcnosti - zostaňte naladení!
Nadchádzajúci rok priniesol množstvo sviežich technológií a trendov, no s najväčšou pravdepodobnosťou budú dominovať trendy, ktoré sa osvedčili do konca roka 2015. Viac videí, riešenia vertikálnych vzorov, nápady inšpirované materiálovým dizajnom a štýlové snímky. Pri týchto technikách sa dá očakávať nárast popularity. Väčšina nových konceptov nie je taká náročná na implementáciu. Nižšie je uvedených 11 trendov webového dizajnu (a mnoho skvelých webových stránok na prezentáciu), ktoré budeme v roku 2016 dosahovať. Ukážky týchto návrhov skutočne pomôžu pochopiť trend.
Stránka je atraktívna s animovaným pozadím, interaktívnymi efektmi
Ešte krajšia typografia
Zjednodušené rozhrania vydláždili cestu myšlienke krásnej typografie (rovnako ako používateľsky prívetivé webové nástroje ako Google Fonts a Adobe Typekit – rozšírenie možností vývoja o obrovské online knižnice). Jednoduchosť nápisov (čitateľných a ľahko vnímateľných) v koncepte „kaligrafie“ uvoľňuje priestor pre ďalšie prvky. Čo by sa malo snažiť nadviazať, je čitateľné písmo a zábavná novosť možností.
Webová stránka reštaurácie vo vidieckom štýle: odmeraná a neunáhlená, bez rozruchu (svetlých kontrastov) s dobre zvolenými farbami a typmi písma. Vidiecky štýl (rustikálny štýl) dáva pocit blízkosti k prírode. Firemná symbolika spojená s vtákmi sa odráža graficky (ilustrácie, kresby pozadia). Vo všeobecnosti ide o súčasť identity – „jastrab a kura“ (angl. Hawk and Hen), ako symbol úspešného lovu
Ilustrácie a kresby
Ilustrácie s kresbami vnášajú do dizajnu kreativitu a veselú náladu. Funguje pre všetky typy stránok (nielen pre deti). Obľúbenosť „ilustrovaného“ štýlu vzrástla aj čo sa týka dizajnu malých prvkov (ikony a pod.) v dizajne stránky.
Na tomto trende je potešujúce najmä to, že ilustrácie dodávajú stránke osobitosť. Keďže ilustrácie alebo „ikony náčrtu“ sú s najväčšou pravdepodobnosťou nakreslené (ručne), vizuálne a vo všeobecnosti sa takáto stránka zdá byť pre používateľov osobnejšia. Z pohľadu vývoja trendu v smere zvyšovania efektivity komunikácie s používateľom je toho na ceste ešte veľa.
Stránka má pekné mikroiterácie a ilustrácie. a „Baby-style“ celej stránky premenia dizajn na hru
Predtým bol na internete rozšírený tabuľkový typ rozloženia, do ktorého . Postupom času však tento prístup k tvorbe štruktúry stránky zastaral a nahradilo ho blokové usporiadanie.
Rozdiely medzi rozložením blokov a tabuľkovým
Ak tabuľkové rozloženie naznačuje, že obsah stránky je vo vnútri značky
, potom vychádza koncepcia blokového usporiadania aktívne používanie univerzálne značky
, v ktorej je umiestnený obsah vrátane ďalších značiek.
Blokové rozloženie nemá nevýhody tabuľkového rozloženia – lepšie ho indexujú vyhľadávače, jeho kód nie je tak rozprestretý a blokuje
, ktoré tak radi nazývajú „vrstvami“, boli pôvodne koncipované ako univerzálne, teda „na všetko“, pričom
je tabuľka, ktorá by sa mala použiť na zobrazenie tabuľkových údajov a nič viac.
Jedinou hmatateľnou nevýhodou blokového usporiadania je to, že stránky na ňom vytvorené sa môžu v prehliadačoch zobrazovať inak. Aby ste tomu zabránili, musíte urobiť rozloženie „cross-browser“, to znamená, že ho rovnako zobrazí každý prehliadač.
Podstata blokového usporiadania
Rozloženie stránky sa vytvorí v grafickom editore: je vyznačené, kde sa bude nachádzať oblasť stránky (hlavička, spodok, bočný panel, hlavný obsah) a koľko miesta zaberie, sú pripravené obrázky, pozadia.
Každá časť stránky je umiestnená vo vlastnom bloku
: horná časť stránky – v prvej, ponuka – v druhej obsah – v tretej atď. Každý blok je vyplnený obsahom pomocou HTML a je tiež umiestnený a upravený pomocou značiek CSS.
Finálny HTML dokument je sada blokov
s obsahom vo vnútri. Štýl je často v samostatnom súbore CSS pripojenom k stránke so značkou alebo aspoň v nádobe
