Sfaturi pentru crearea unui design layout website

Orice fel de activitate rezonabilă ar trebui să înceapă cu scrierea planului, adică - specificațiile tehnice.

Pregătirea adecvată a brief - un pas important spre obținerea rezultatului prezis al designerului.

Scurt - un chestionar bazat pe document care este furnizat proiectantul de către client, cu toate informațiile necesare pentru acestea din urmă. De obicei, aceste informații despre companie, scopurile și obiectivele proiectului, programul și bugetul. Exemple de indispensabili pot fi puse la dispoziția publicului pentru a descărca de pe Internet. Pe baza informațiilor primite de la scurt, elaborat termeni de referință pentru funcționarii executive. Acesta este un cadru clar și coerent pentru liniile directoare de acțiune pentru toți profesioniștii implicați în proiect. Dezvoltatorul ar trebui să fie, de asemenea, remarcat pentru ei înșiși punctele cheie ale proiectului, să definească măsuri complexe de lucru, pune în jos prioritățile de dezvoltare a aspectul site-ului. Următorul pas logic este de a desena o schiță.

Elaborarea schiței aspectul site-ului

„De la mare la mic“, „De la general la detaliu“ - aceste două reguli privind organizarea muncii - unul dintre primii care a predat la școala de artă. Nu puteți începe să picteze un portret cu ochii precum și nu ar trebui să fie inițiat de a fi aspectul site-ului butoanelor de navigare meniu. Desenați o schematică elemente structurale de bază ale site-ului, fără a intra în detalii în mod specific, în scopul schiței - blocurile de construcție de bază pentru a vizualiza aspectul. Odată ce obiectivul este atins și schița arată, respectiv, specificațiile tehnice și gustul estetic krieyterom schiță este transferat la rețea.

Alegerea dimensiunii la crearea unui aspect site-

Să presupunem că ai un proiect tehnic, care să ateste că site-ul corpului să fie o lățime fixă ​​în mijloc și pe părțile laterale, cu un fundal de cauciuc. Se pune întrebarea, ce lățime ar trebui să fie stabilite. Având în vedere o rezoluție minimă de ecran, și este 1024x768, vom crea un spațiu de lucru 1003 pixeli. În cazul în care este de 21 de pixeli? El a mers la o defilare laterală, și a cărui dimensiune este de 21 de pixeli. Deci, se pare că zona de lucru nu trebuie să depășească 1003 pixeli. Cei mai mulți designeri recomandat să setați o valoare fixă ​​de site-ul corpului la 1000 de pixeli și 100 de pixeli pe un cauciuc lateral. Setat corect aspectul site-ului lățime, pentru a evita defilarea pe orizontală. Ce înălțime ar trebui să fie stabilite? Înălțimea de aspectul site-ului este împărțit în ecrane. Toate informațiile importante ar trebui să fie plasate pe primul ecran, înălțimea, la fel ca și lățimea zonei de lucru trebuie stabilită ținând cont de elementele de navigare browser-ul.

1. grila Manuscris sau bloc mesh. Cea mai simplă formă de grilă, în care este definit doar o singură zonă:

2. Coloana. Una dintre cele mai populare retele, un exemplu de o grilă coloană populară - 960. gs. Contrar credintei populare, grila coloana nu este modular, deși a fost utilizat pe scară largă în site-uri web design. Grila Coloana împărțită în diferite subtipuri, în funcție de numărul de coloane din ea. Aceasta este o 8-, 12-, 16- și 32-grilă coloană:

Site-ul folosit grilă 12 coloane:

3. ierarhică. blocuri de rețea sunt aranjate ierarhic, în funcție de scopurile și obiectivele de proiectare:

site-ul BBC în structura de design aderă la un sistem ierarhic de plasare de știri.

Ce este un modul? În lumea noastră este încă nici un sistem uniform de măsurare. Cele mai multe dintre elementele diferitelor sisteme de măsurare au fost luate de proporții fizice umane. După ce ușile au fost de măsurare umeri și metru - trepte. În orice sistem de măsurare, unitatea de bază - modul. Sistemul metric, care este utilizat în Europa, este de asemenea, compus din module. Grila modular - un sistem de proporții, care este folosit pentru orice proporționalitate.

De ce să folosiți un sistem modular de proiectare site-uri de rețea?

elemente structurante un model predeterminat dă echilibrul proporțiilor și compoziția construite în mod corespunzător. Unificarea într-un model predeterminat de proporții elemente de design conferă percepția integrității aspectul site-ului. Utilizarea unei rețele modulare nu va facilita numai o înțelegere a elementelor aspectului site-ului și alinierea lor, dar, de asemenea, facilita în mare măsură viața unui typesetter. Grila modular va ajuta sa accelereze procesul pentru a calcula dimensiunea elementelor de design și determinarea distanței dintre ele.

Construirea unei grile modulare:

1. Definiți zona de lucru.

2. Determina dimensiunea fontului și înălțimea rândului, de multe ori este înălțimea modulului.

3. Se determină lățimea modulului. Acest lucru se poate face în două moduri: pornind de la valoarea element semnificativ de design static, sau prin numărul lor. De exemplu, știind că designul site-ul ar trebui să găzdui un meniu de navigare cu șase butoane, egale între ele și echidistant unul față de celălalt, este ușor să se calculeze distanța necesară între ele. Amintiți-vă că lățimea minimă a modulului este egală cu înălțimea.

4. Se combină elementele unei rețele modulare unele cu altele, creând o schiță a compoziției noastre.

Anatomia unei grile modulare.

Transferul principalelor elemente ale concepției pe grila.

Site-ul a terminat de proiectare pe o grilă modulară.

Amintiți-vă că grila - doar una dintre uneltele proiectantului colegi și poate, în unele cazuri, șine usor de inlocuit. (Aflați mai multe despre utilizarea de grile modulare în proiectarea grafică poate fi în cartea Allen Horlberta „Modular Grid.“).

Următoarele sunt exemple de site-uri, interfata grafica, care este construit pe o grilă modular:

Structurarea aspectul site-ului

Ceea ce separă profesionale de amatori? Calitatea muncii prestate. Crearea unui site - acesta este un colectiv, iar mai multe persoane care lucrează la proiect. În continuare, în care devine codor de aspect de mână. În ceea ce privește faptul, dacă proiectantul pentru a putea impune, există mai multe puncte de vedere opuse, dar ele sunt, de fapt, unite într-o singură concluzie: proiectantul trebuie să înțeleagă principiile de bază ale aspect și să se pregătească aspectul, ținând cont de aceste principii.

1. Se combină straturile din grup. Toate mici elemente de design ar trebui să fie combinate în grupuri și le numesc, respectiv. Pentru a evita problemele atunci când sunt deschise în alte sisteme de operare, toate straturile necesare pentru a apela în limba engleză.

2. Grupurile Layer sunt împărțite în grafica și tipografia tipografie Se separă textul general și titlurile.

3. Solicitarea elemente globale.

4. Orice straturi neutilizate trebuie eliminate. Destul de des întâlnită greșeală designeri novice au off straturi inutile. Amintiți-vă că coder face vizibile toate straturile dintr-o dată. Excepțiile sunt straturi de interacțiune, dar despre ele mai târziu.

5. nu pentru a produce straturi suplimentare. În acest sens, utilizați Gradient Overlay. Toate ilustrațiile sunt convertite într-un singur strat. De obicei, un aspect designer de experiență sunt două versiuni: o versiune mai detaliată în cazul modificării, și concis - pentru typesetter.

- toate fonturile utilizate atașate la scrisoarea de intenție;

- verifică siguranța fontului.

Pe acest link puteți vedea o listă de fonturi care sunt sigure și comune pentru toate versiunile de OC pentru Windows, și echivalentele lor în OC Mac.

7. Valoarea rotundă.

8. pește Text utilizat în conformitate cu conținutul real al site-ului, în cazul în care este site-ul în limba rusă, popularul text Lorem ipsum pește nu se va vizualiza în mod adecvat tipografia în layout design.

9. Interacțiunea. Designer în structura unui site nu ar trebui să ia în considerare numai toate modificările de proiectare în interacțiunea cu utilizatorul, dar, de asemenea, pentru a le identifica într-un strat separat. Aceste straturi pot fi oprite, dar asigurați-vă că pentru a face o marcă în numele stratului și / sau scrisoarea de intentie. Se recomandă tuturor statelor buton pentru a aloca o culoare diferită, pentru o mai bună vizualizare. Apoi, apar întrebări de genul: „Cum acest buton se aprinde atunci când apăsați?“

Acestea, faza destul de simplu și logic, de reglementare cu privire la aspectul site-ului facilitează foarte mult activitatea nu numai proiectantul, ci și tuturor celor care vor lucra cu produsul creativitatea. Asigurați-vă de design de înaltă calitate și, probabil, eternul război Sfânt între designer și coder final.

articole similare