Cum este aspectul blocului?

Înainte de a începe aspectul, aspectul PSD gata al site-ului din editorul grafic este tăiat în blocuri (straturi). Într-un folder separat, sunt plasate imagini de fundal sculptate, care vor fi atașate separat fiecărui strat:

De exemplu, luați acest aspect al site-ului creat în Photoshop. În primul rând, într-un editor de text, specificați structura resurselor viitoare utilizând DIV și atribuiți selectorul de identificare identic la fiecare strat. Se pare că o astfel de structură:

Apoi la structura terminată a site-ului de pe șirul HTML Atașați fișierul CSS. După aceea, adăugați o descriere stilistică a fiecărui strat în ea, poziționarea în raport cu alte elemente și dimensiunea acestuia.

Puteți să vă familiarizați cu toate proprietățile CSS mai detaliat din documentația tehnică pentru limbă.

Codul complet al unui exemplu Index.html:

Conținutul fișierului stil.css:

corpul (culoarea: # 000000; Font-Family: Trebuchet Ms, Arial, Times New Roman; Font-dimensiune: 12px;) #container (fundal: # 99cr99; margine: 30px auto; lățime: 900px; înălțime: 600px;) Antet (fundal: 100px; lățime: 900px;) #navigație (fundal: # ff9999; lățime: 900px; înălțime: 20px;) #menu (fundal: # 99cr99; float: stânga; lățime: 200px; înălțime: 400px;) # Conținut (fundal: # D2D0D2; Float: dreapta; Lățime: 700px; înălțime: 400px;) #Clear (clar: ambele;) #footer (fundal: # 0066FF, înălțime: 80px; lățime: 900px;)

Deci, exemplul nostru al structurii blocului al site-ului arată în fereastra browserului:

Desigur, acest exemplu este doar un manual vizual pentru demonstrarea modului în care se produce structura blocului. Amenajarea reală are loc cu utilizarea imaginilor de fundal și a logo-urilor conectate în CSS. Și, de asemenea, cu includerea în HTML și CSS codul Khan pentru a optimiza afișajul în toate browserele.

Explorarea expansiunilor rețelei, mulți probabil observă că majoritatea site-urilor sunt construite pe baza grilajului. Elementele sau blocurile din astfel de site-uri sunt situate pe pagina nu haotică, așa cum a fost acum câțiva ani și într-o anumită secvență și structurată (uneori se întâmplă neobservată la prima vedere). Astfel de site-uri sunt bine echilibrate și, de regulă, arată pur și curat. Marele merite al acestei ordonări aparține grilăBaza proiectului și a utilizatorului care oferă o structură clară și nedisguită.

În ciuda faptului că rețelele, de regulă, reprezintă intersecții simple ale liniilor orizontale și verticale la un interval dat, mulți designeri le folosesc ca decor și subliniază prin forme geometrice evidente și căi vizuale. Putem vedea aceste căi și cifre în site-urile de portofoliu, galerii, bloguri și alte proiecte creative. Acest lucru nu este surprinzător, deoarece grila are o serie de proprietăți și avantaje utile, de exemplu, cum ar fi:

• Crearea căilor vizuale pentru a ghida utilizatorii
• Combinarea diferitelor componente într-un singur întreg
• Sortați informații.

Bineînțeles, grila este mai bine potrivită pentru a demonstra frumusețea liniilor drepte. Mai jos am pregătit site-uri în care grila este mai mult decât doar baza designului.

Concluzie

Așa cum am menționat deja, grila este o parte integrantă a designului și transformă cu ușurință haosul în ordine, iar în designul site-ului, la fel de oriunde, această posibilitate este cu adevărat importantă. Majoritatea utilizatorilor doresc să obțină informații rapid și ușor și nu există o cale mai bună decât să le prezinte o structură clară și bine organizată.

Nu, acest lucru nu înseamnă că aspectul site-ului ar trebui să fie liniar și simplu. Uneori, chiar și forme geometrice simple, diluate cu îndemânare cu flori, imagini și grafică (amintiți-vă de designul plat) pot fi cu adevărat atractive. Ce crezi? Această separare explicită pe blocuri nu arată atractivă?

La dorința de sănătate, tovarășul cititorului!

De ce am nevoie de pagini de aterizare în 10 blocuri, dacă informațiile importante sunt pe primul ecran și pot fi limitate la secțiunile "Despre noi", "Servicii", "Prețuri" și "Contacte"? Răspunsul este simplu: la actualizați atenția Cumpărător și topire alăturați-vă relațiilor cu bunurile și indpense pentru a cumpăra un produs.

Cele mai utilizate tehnici de angajare vizitator În procesul de cumpărare a bunurilor este Aida. (de la limba engleză. Atenție-interes-dorință-acțiune) și PMPhs. (Durere mai mare durere-speranță). Ghidate de aceste tehnici, se construiește structura logică a paginii de destinație și blocurile care vor fi prezente pe împrumut sunt determinate.

Pentru că am colectat 20 exemple ilustrative de blocuriefectuarea unei funcții informative specifice. Exemplele vor fi utile dacă sunteți, de asemenea eliminați comunicarea Cu designerul și designerul împrumuturilor dvs.

În acest post, vă veți familiariza cu primele jumătăți de blocuri. Celelalte 10 exemple așteaptă în următorul articol din august.

20 blocuri de aterizare - alegeți-vă

1. Blochează componentele produsului, echipamente;
2. Bloc-garanție (triplă);
3. Bloc pe realizări / beneficii ale companiei dvs.;
4. Blocați angajații companiei;
5. Blocuri pe serviciile / departamentele companiei;
6. Bloc pe parteneri / clienți;
7. Sute (apel la acțiune, apelând la acțiune);
8. Blocați avantajele clientului de la utilizarea produsului dvs. ("De ce noi?");
9. Bloc cu privire la procesul de furnizare a serviciului (livrare, metoda de efectuare a tranzacției);
10. Blocul de calculator;
11. Bloc cu o acțiune + limitator de timp;
12. Bloc cu cadou + condiții cadou;
13. Bloc cu o hartă a locației companiei ("Cum de a conduce");
14. Bloc cu informații de contact;
15. Blocați tabelul comparativ;
16. Blocarea identificării "pentru cine?";
17. FAQ-FAQ.

* Numerotarea blocurilor este prezentată aproximativ - ordinea blocurilor de aterizare depinde de nișă. Puteți determina ordinea blocurilor care utilizează toate aceleași instrumente ale valorilor Yandex (, harta derulantă, o hartă a clicurilor) vă va ajuta cu acest articol.

Conține informații cheie pentru vizitatorul de aterizare, MTP al companiei dvs. Este de dorit ca aceste informații să fie competitive. În funcție de nișă, astfel de informații pot fi: prețul produsului (de la 488 ruble pe 1 buc.), Timp de livrare (livrare timp de 2 zile), site de producție (direct din Germania). Puteți afla mai multe despre articolul precedent.

Potrivit pentru: Subiecte en-gros; Nișa, unde cumpărătorul nu este suficient de conștient de beneficiile produsului (mai ales produs).

Blocul poate fi răspunsul la întrebarea cumpărătorului "De ce este atât de scump?" Dacă este descris în detaliu caracteristicile produsului. Este necesar să se creeze o imagine mai clară a obiectului de poftă în capul potențialului client.

3. Piese bloc-compozit ale produsului, echipamente

Potrivit pentru: Descrierea serviciilor complete; Nișa pentru organizarea timpului liber; Descrieri ale configurației produsului.

În cazul în care blocul de caracteristici ale produsului demonstrează bunurile, blocul despre părțile componente decide produsul (produs sau serviciu) la componente.

4. Garanție bloc (triplu)

Potrivit pentru: Orice pagină de aterizare.

Cel mai adesea se află după blocul cu costul produsului. Se bazează pe obiecțiile Asiei Centrale și le închide, demonstrând beneficiile serviciului în compania dvs.

5. Blocați pe realizări / avantaje

Potrivit pentru: orice împrumut; Produs de marcă de la o companie bine-cunoscută; Deosebit de importante în nișă extrem de competitivă.

Mai ales important pentru afaceri în nișă extrem de competitivă. De exemplu, dacă mai multe companii oferă același produs, atunci concurenții câștigați vor fi cei care vor oferi cele mai convenabile condiții pentru tranzacție și va arăta competența activității companiei sale (din ce an există o companie, Numărul de proiecte implementate, reduceri și cadouri către clienții obișnuiți, punctele de vânzări etc.).

6. Blocați angajații companiei

Potrivit pentru: Nishi pentru furnizarea de servicii

Cererea este recomandabilă într-o situație în care este important nu CE va primi un cumpărător și LA FEL DE Rezultatul va fi realizat.

7. Blocarea serviciilor / departamentelor

Potrivit pentru: Temele de servicii complexe; Aterizare cu mai multe bunuri într-o zonă de aplicare.

8. Blocați partenerii

Potrivit pentru: Orice aterizare.

Blocul mărește încrederea vizitatorului, dacă utilizați logo-urile clienților bine-cunoscuți.

Potrivit pentru: Info Business; sectoare de servicii; Nișa unde este important procesul (LA FEL DE) Obținerea rezultatelor.

Excelentă adăugare la cazuri - demonstrație vizuală A fost / a devenit, precum și infografice și cărturari imprimate cu statistici.

Nișa unde demonstrația este importantă:

Va urma…

Astăzi am discutat primele 10 blocuri pentru aterizare, în viitorul apropiat voi publica mai mult - vizionați actualizările!

Anul următor a adus o mulțime de tehnologii și tendințe proaspete, dar este cel mai probabil să domine direcțiile care s-au manifestat până la sfârșitul anului 2015. Mai multe videoclipuri, soluții cu modele verticale, idei inspirate de designul materialului și diapozitive elegante. Pentru aceste tehnici, ar trebui de așteptat să crească popularitatea. Cele mai multe dintre noile concepte nu sunt atât de dificil de implementat. Mai jos vor fi abordate 11 tendințe de design web (și multe site-uri excelente, de exemplu) cu care vom întâlni în 2016. Eșantioanele acestor modele vor ajuta cu adevărat să experimenteze tendința.

Site-ul este atractiv în medii animate, efecte interactive.

Chipografie și mai frumoasă

Interfețe simplificate Îngrijirea ideii de a aplica o tipografie frumoasă (precum și unelte web convenabile, cum ar fi Google Fonts și Adobe TypeKit - Extinderea cu biblioteci online uriașe de oportunități de dezvoltare). Simplitatea inscripțiilor (citibile și ușor percepute) în conceptul de "caligrafie", eliberează spațiul la alte elemente. Ce ar trebui să fie încercat să lege, deci este un font lizibil și noutate de distracție a opțiunilor.

Site restaurant de țară: măsurată și nemulțumită, fără agitație (contraste atrăgătoare) cu culori și fonturi bine selectate. Stilul țării (stil rustic) oferă un sentiment de intimitate. Simbolismul de marcă asociat cu pene este reflectat grafic (ilustrații, desene de fundal). În general, aceasta face parte din ajutorul lui AIDKI - "Hawk și Chicken" (Hawk și Hen), ca un simbol al vânătorii de succes

Ilustrații și imagini

Ilustrațiile cu desene fac o fantezie creativă și o dispoziție amuzantă în design. Lucrează pentru toate tipurile de site-uri (nu numai pentru copii). Popularitatea stilului "cu ilustrațiile" a crescut, de asemenea, când a venit la proiectarea unor elemente mici (icoane etc.) în designul site-ului.

Ceea ce este deosebit de mulțumit de această tendință - ilustrațiile sunt adăugate de site-ul personalității. Deoarece ilustrațiile sau "icoanele de schiță" sunt cele mai probabile trase (cu mâna), apoi vizual și pentru senzații generale, un astfel de site pentru utilizatori este mai personal. Din punctul de vedere al dezvoltării tendinței de îmbunătățire a eficienței comunicării cu utilizatorul - există încă multe de făcut pe această cale.

Site-ul are mici microunde și ilustrații. și "stilul Bebi" al întregului site transformă designul în joc

Anterior, un tip de strat de masă a fost larg răspândit pe Internet, care este dedicat. Cu toate acestea, în timp, această abordare a creării structurii site-ului este depășită, iar un strat de bloc a venit să o înlocuiască.

Diferențele de structură a blocului din tablou

Dacă stratul de masă implică faptul că conținutul paginii se află în interiorul etichetei

Stratul de bloc este lipsit de deficiențe tabulare - motoarele de căutare este indexată mai bine, codul său nu este un astfel de val și blocuri

Documentul final HTML este un set de blocuri