Proiectarea sfaturilor și exemplelor privind aspectul intensiv al conținutului

Pentru a crea machete cuprinzătoare pentru web, este nevoie de abilități și multă dedicație. Designerii de web își fac un loc de muncă în cazul în care cei mai mulți nu pot face, și într-un mod foarte sofisticat. Pe măsură ce paginile web au evoluat, am văzut nevoia de a umple mai mult spațiu și de a avea mai mult conținut decât oricând. Dacă deja înțelegeți cum să creați un site web, acesta este un bonus imens spre înțelegerea mai bine a acestor metode. Caracteristicile principale într-un site rar se schimbă. Cu toate acestea, cu conținut de pagină mai mult decât media, alți factori intră în joc, inclusiv spațiul alb, tipografia, poziționarea elementelor, printre altele.

Vom intra în detaliu pentru a acoperi câteva sfaturi importante pentru a construi structuri de conținut intensiv. Acestea pot varia de la aplicații de rețele sociale, site-uri mari de afaceri și corporații sau orice altceva între ele. Este important să vă întrebați "ceea ce încerc să realizez cu acest design?"când proiectați pagini, deoarece vă va ajuta să anticipați o perspectivă mai largă.

Pagini Web personalizate

Indiferent cât de experimentați în designul web practic ai putea fi, este adevărat că am trebuit să începem undeva. Proiectarea paginilor web personalizate este, în general, primul pas către o carieră în programarea web înainte de a aplica specificațiile convenționale.

Întotdeauna recomand să creați o mică listă de elemente de pagină considerate a fi instalate în șablon. După ce toate acestea sunt scrise, devine mai ușor să eliminați ideile rele sau să ridicați pietre pierdute sau uitate. Acest lucru, de asemenea, deschide calea pentru planificare ușoară pentru a scuti de stres în jos pe drum.

Layere Wireframe

Pentru site-ul generic de 5 pagini veți vedea adesea aceleași elemente repetate. Un logo de colț de sus, legăturile de navigare pentru cap, zona principală de conținut, eventual împărțită cu o bară laterală și alte funcții (login, casetă de căutare etc.).

Luați în considerare un bun punct de pornire pentru a construi în layout-uri detaliate de pagină. Mulți designeri consideră că este util să schițeze posibilele modele de fire wireframe pentru a exclude defectele care nu sunt atât de evidente. Acest lucru nu necesită nici o hârtie fantezie și poate fi făcut chiar și într-un notebook ruled-down. Scopul unui cadru de sârmă este de a da o idee grosolană despre locul în care aspectul site-ului ar trebui să se îndrepte cu cameră pentru a completa detaliile mai târziu.

În ceea ce privește aspectele grele de conținut, ar trebui să se țină cont de cât de mult va conține platforma. Construind o structură închisă cu 2-3 coloane pentru a găzdui 100 de pagini de conținut lung, complicat nu va lăsa prea mult spațiu pentru a respira spațiu. Prin schițarea și planificarea înainte puteți controla cantitatea de cameră spațioasă pentru conținutul paginii. Acest lucru nu încapsulează doar zone text sau blocuri, ci se ocupă de imagini și de filme.

Spațiul alb strălucitor

Spațiul alb este posibil cel mai important factor pentru a fi luate în considerare în design-ul de aspect intensiv. Conținutul site-urilor o leagă, mai mult decât orice site web obișnuit. Dacă cititorii nu reușesc să înțeleagă conținutul, deoarece nu există loc de digerare a cuvintelor dvs., traficul va fi neclar și nemulțumit.

Paragrafele și anteturile paginilor sunt un loc minunat pentru a începe cu personalizarea. Utilizând proprietățile CSS, ar trebui să puteți manipula margini externe și să eliminați fiecare element de text din linia de bloc. Acestea includ toate rubricile 1-6, paragrafe, bloccoate, liste, text preformat și câteva elemente mai mici.

Dacă doriți să țineți atenția cititorului dvs., este important să aplicați spațierea sub elementele principale de text. Punctele și rubricile mai mici funcționează cel mai bine cu marjele inferioare de 15px-25px. Pentru elemente de pagină mai mari, cum ar fi h1 sau h2, luați în considerare 35px + (aceasta va depinde și de dimensiunea fontului dvs.). Spațiile dintre elementele verticale sunt importante pentru scanarea și scanarea "instantanee". in orice caz inaltimea liniei este o altă proprietate CSS importantă care influențează distanța dintre liniile dintr-un element de text. Paragrafele ar trebui să aibă o valoare mult mai mare a liniei înălțime în comparație cu dimensiunea fontului, astfel încât există o mulțime de umplutură suplimentară între linii.

Luați în considerare stilurile dinamice

În afară de spațiere, tipografie digitală ar trebui să fie manipulate în moduri de a face să sară de pe pagină. Cu sute de milioane de site-uri web din lumea de azi, este obișnuit să vedeți aceleași tipuri de fonturi oriunde.

Dacă proiectați un aspect pentru un site greu de conținut, rezultatul va arăta ca un alt șablon bland până la sfârșit. Există o mulțime de proprietăți pentru a juca în jurul valorii de pentru stiluri tipografice avansate. Umbri de text, mai puțin / mai multe spații pentru litere, platforme de fundal, pictograme ... lista este nesfârșită.

Într-adevăr sunteți proiectantul și ultimul cuvânt este legea. Proiectarea unui aspect nu este comparabilă cu o singură autostradă cu o singură benzină, fără nici o schimbare. În timpul procesului, puteți să vă întoarceți și să schimbați stilurile, să manipulați elemente noi sau să distrugeți complet un concept. Luați în considerare unele alte sfaturi utile CSS și jucați în jur pentru a vedea ce se potrivește cel mai bine!

Utilizați meniurile derulante

Cu atât de mult conținut este puțin probabil că toate legăturile dvs. se vor potrivi pe o singură pagină. Există multe opțiuni cu privire la modul de gestionare a supraîncărcării de pagini. Plasarea de legături suplimentare în blocurile laterale sau cusute în coloane în subsolul site-ului sunt două opțiuni intenționate.

Alegerea cea mai convenabilă și mai utilă este crearea unei scheme de navigare drop-down cu categorii și subcategorii. Există, de asemenea, multe scripturi open source care oferă sub-sub-categorii dacă aveți subiecte extrem de detaliate.

Eventual cea mai rapidă și mai puțin frustrantă strategie este să înceapă cu un cadru JavaScript. Unele dintre cele mai populare includ jQuery, MooTools, sau posibil Prototype. Toate aceste biblioteci oferă documentație, iar multe dintre acestea dispun de scripturi de meniuri gratis disponibile.

Planificați afișările de conținut

În practică, este mult mai dificil să creați o zonă corporală simplistă pentru a găzdui tot conținutul pe care îl conține site-ul mediu. Cu ajutorul standardelor de navigare și a suportului mobil semi-inferior, nu este de mirare că vedem astfel de site-uri cu conținut intensiv. Fiți sensibili la fiecare stil de pagină web afișat. Unele vor conține mai multe imagini, altele pot conține o grafică primară sau un videoclip sau nu au nicio grafică. După ce ați terminat codarea aspectului final, creați mai multe pagini HTML pentru a găzdui vizualizări diferite.

Toate acestea vor avea același marcaj intern, cu excepția conținuturilor din interiorul zonei principale de conținut. Fiecare vizualizare individuală a paginii poate fi manipulată și oferă o perspectivă asupra unui produs finit. Schimbați această opțiune pentru a conține toate opiniile majore pe care le considerați necesare cu fiecare pagină. Alte exemple de elemente de pagină ar putea include casete cu comentarii, videoclipuri sau galerii încorporate, sau link-uri de tip "split-page".

Planificați strategiile în totalitate

În realitate, nu este în întregime dificil să creați un layout web de putere. Mulți designeri sunt prinși cu detaliile minore, cum ar fi cum să plantați elemente de bloc sau hyperlink-uri de culoare. Aceste detalii sunt importante pe măsură ce trimit un mesaj de branding, chiar și din elemente mai mici mesajul ar trebui să vină împreună cu întreaga pagină. Planificați mentale etapele designului dvs. pentru a afla cum este cea mai bună abordare pentru fiecare obstacol. Dacă lucrați cu un client, ar fi bine să discutați în prealabil ce tip de conținut va fi completat de pagini. Acest lucru vă oferă posibilitatea de a planifica și de a strategiza cea mai bună abordare pentru un aspect general.

Un alt subiect, mai ales droll, este designul mobil. Această nouă piață se confruntă cu o extindere extraordinară nu numai în smartphone-uri, ci și în tablet PC-uri puternice. Acest lucru înseamnă că utilizatorii pot accesa aspectul dvs. de pe un ecran mobil - asigurați-vă că conținutul nu se deplasează și că se prezintă cu ușurință.

7 Exemple de site-uri cu conținut greu

Mai jos sunt câteva exemple de capturi de ecran de pe site-uri populare de conținut greu. Acestea sunt, în general, branduri bine cunoscute atât pe piețele fizice, cât și pe cele digitale. Consultați câteva dintre ideile de mai jos pentru a găsi o inspirație în proiectele proprii. De asemenea, nu ezitați să distribuiți alte aspecte de conținut web grele în secțiunea de comentarii.

rihtuitor

Clicker este o nouă aplicație de socializare pentru iubitorii de televiziune și filme. Vă puteți înscrie pentru un cont nou și puteți găsi unele dintre emisiunile dvs. preferate de televiziune clasice, arhivate după sezon și listarea cu episoade. Puteți compara site-ul cu IMDB cu mai puține informații și mai mult conținut video!

Viitorul designului web

Viitorul Web Design 2011 va lansa lucruri in Londra in primavara viitoare. Consultați pagina de pornire pentru mai multe informații și un exemplu excelent de design al planului de text. Toate detaliile sunt împărtășite cu adevărat și oferă vorbitori, orare, ateliere de lucru, sponsori și multe altele.

Domnul probabil

În acest aspect comic, personajul principal Lord Likely a fost "cartoonizat" și perforat într-o ilustrație. Site-ul este împărțit în 3 coloane cu fiecare conținut sportiv nou, anunțuri, link-uri de feed și arhive. Design-ul în sine este foarte retro și o înțelegere inteligentă asupra desenelor ilustrative.

Microsoft

Majoritatea entuziaștilor din domeniul tehnicii sunt familiarizați cu Microsoft. De fapt, majoritatea oamenilor care înțeleg ce este un computer vă pot oferi chiar și o scurtă descriere a Microsoft și Bill Gates. Pagina lor de acasă găzduiește conținut pentru zeci de pachete software, actualizări de știri, comunicate de presă și informații despre dezvoltatori. În câteva moduri în josul paginii puteți vedea un meniu vertical cu comutare dinamică a conținutului.

Terenul motorului de căutare

Search Engine Land este o revistă web populară care se concentrează pe motoarele de căutare și marketingul pe Internet. Ei se actualizează frecvent cu posturi de calitate uimitoare și conduc sute de mii de oameni pe site-ul lor în fiecare zi. Pagina principală se împarte în 3 coloane folosite pentru a ține fiecare modul de conținut și publicitate.

Casa Alba

Designul Casei Albe din Statele Unite arată foarte curat și profesional. Există o mulțime de informații cu privire la programul președintelui și la alte evenimente politice importante. Un truc pentru atenuarea camerei de pagină a fost adăugarea unui glisor de conținut mic spre poziția paginii. Acest lucru este minunat pentru afișarea a 3-4 mari titluri de știri chiar atunci când vizitatorii dvs. ajung pe pagină.

Portalul Yahoo

În ceea ce privește site-urile mari de conținut, Yahoo! trebuie să se îndrepte spre vârf. Yahoo! oferă sute de servicii clienților lor, inclusiv webmail, știri, videoclipuri și chiar căutarea pe web. Check out unele din Y! portaluri din bara laterală pentru a vedea cum se compară șabloanele lor.

Concluzie

Acestea sunt doar câteva dintre punctele cheie și pașii necesari pentru a construi o structură concretă de conținut. Paginile web cu rezervoare mari de conținut sunt adesea considerate ca fiind o povară care deține furaje SEO și nimic de valoare reală. Design-ul este totul deoarece este prima impresie pe care un utilizator o primeste de pe fiecare site. Cu volum mare de conținut, acest lucru poate deveni un dezastru cu dezordine și generalizări. Nu vă opriți niciodată de practică și cu doar câteva proiecte veți obține o măiestrie pentru a vă imagina conținutul intensiv.