Secretele de Web Design

Și acum veți învăța cum să faceți diferite schițe, prototipuri de diferite modele de site-uri viitoare.

Bine, începem. Subiectul pe care îl avem, așa cum am spus, este crearea de prototipuri ca cea pe care o vedeți acum pe ecranul dvs., de exemplu, site-ul viitor. Pentru a începe cu un pic mai în detaliu să-l spun, de ce, și cum beneficiază de ea, pentru că, la urma urmei, ar trebui să știți răspunsul la întrebarea de ce ai nevoie de ea, sau o faci neglijent. Când înțelegeți toate avantajele, în consecință, veți face totul cu mult mai mare dorință. Deci, acest subiect pe Internet, dacă te uiți la limba rusă, mulți oameni sună diferit: cineva o numește ascuns, cineva numește prototip, cineva numește mekapy. Pe scurt, spunem că nu învățăm limba rusă - scopul nostru principal este să învățăm designul, așa că, ca să spunem așa, să vorbim despre slangul profesional nu se va deranja, ci va studia, să spunem chiar esența. Linia de jos este că scopul nostru principal este de a schița site-ul despre acest lucru, pe care acum vezi: Un foarte simplu, în cazul în care toate blocurile necesare, puteți vedea totul, totul este clar și, în consecință, pe ea putem muta deja în Photoshop și să lucreze prin toate elemente. Să răspundem la întrebarea: de ce trebuie făcute toate astea? De fapt, motivul este foarte simplu.







Să luăm în considerare o situație complet normală, cum funcționează începătorii, cum funcționează profesioniștii. Începătorii, de obicei, sări peste acest proces, ciocanesc pe el și gândesc: "Ah, mai bine voi începe să lucrez în Photoshop, economisiți timp și obțineți rapid rezultatul". De fapt, în practică, totul este exact opusul, iar rezultatele pe care le obțin sunt mult mai lungi. De ce se întâmplă acest lucru? Să luăm în considerare situația obișnuită, banală. Vom avea un nou venit, acesta este un profesionist. Nou-venitul se îndreaptă imediat spre Photoshop și începe să deseneze un fel de design al site-ului acolo. Adică, eu voi condiționa în mod condiționat anumite elemente. Adică, să ne imaginăm pentru o clipă că aceasta este o grafică frumoasă. În același timp, profesionistul trage mai întâi același design pe un creion convențional, de exemplu, de hârtie, obișnuit. Aproximativ același site. Să ne imaginăm că ambii aceștia desenează designul dat pentru un client, lucrează în studio sau independent, sau pot să deseneze pentru ei înșiși, dar nu contează. Să presupunem că avem prima etapă - aceasta este crearea unui prototip, a doua etapă este lucrarea din Photoshop. Aproximativ vorbind, aici un începător petrece 0 ore, minute, un profesionist petrece, bine, să zicem, 3-4 ore. Apoi, nou-venit atrage design 2 zile (de obicei, dar nou-veniți atrag mult mai rapid și toate obține câteva ore, 2 zile, ei de obicei, nu au) și, să zicem, același lucru făcut de un profesionist, care este, de 2 zile. Dacă ne uităm la această situație acum, vedem că profesionistul a petrecut mai mult timp, iar rezultatul este, în principiu, același. Dar, de cele mai multe ori, se pare că clientul sa uitat la rezultatul lucrării și a spus: "Și să rearanjăm un bloc sau să nu facem pătrat, dar, să zicem, lățime întreagă. Ei bine, acestea sunt compatibile, aici grafica ar trebui să fie complet eliminată, meniurile se schimbă, și așa mai departe ... ". Dar care este diferența? Clientul, când sa uitat la aspect, a făcut aici un prototip. Asta este, avem rezultatul final toate la fel 2 zile 4 ore. Aici clientul a aprobat. Asta este, totul, profesionistul a trecut aspectul. Și noul venit va trebui să refacă totul datorită faptului că nu a arătat aspectul. În consecință, el mai poate petrece încă 1-2 zile. Aceasta este, cel mai bun caz, el va preda lucrarea în zona de 3-4 zile, pentru că el va trebui să refaceți totul aproape de la zero, pentru ca va exista cel mai probabil, program care atunci când zoom, redimensionarea, pierde în calitate. Va trebui să o procesăm din nou, va trebui să trasăm câteva elemente noi (cel mult, 80%) și, prin urmare, avem mult timp aici. Și comparați rezultatul: aici 3-4 zile, și aici - bine, în medie, 2 zile 4 ore. Se pare că, în analiza finală, dacă luăm în considerare tot timpul procesului, atunci când am primit comanda, iar când am trecut, atunci când tragem un prototip, apoi, în consecință, în cele din urmă iese încă mai puțin, deși poate arăta inițial că acesta este un fel de nonsens și nu ar trebui să fie implicat în el. Dar, dacă intenționați să faceți freelancing sau să lucrați undeva în studio, atunci acesta este un element indispensabil pentru dvs. și nu puteți să o faceți fără ea. Da, în general, pentru a fi cinstit, fără o astfel de elaborare, va fi destul de dificil să creați un design de înaltă calitate. Pentru că atunci când prezentați vizual cel puțin un model pe care veți suprapune deja toate materialele de calitate, blocurile, grafica și așa mai departe, veți fi mult mai ușor. Adică, capul dvs. va fi deja gratuit, va trebui să implementați toate acestea din punct de vedere tehnic. Dacă nu, atunci mintea ta va fi o mulțime de gândire cu privire la modul în care tot acest loc împreună, elementele de pe partea de sus a reciproc, nu urca, nu ascunde, și, astfel, trebuie să fie mai mult pentru a veni de prelucrare. În consecință, capul va exploda dintr-o grămadă de gânduri. Ei bine, cred că după astfel de argumente te-am convins și vei face mereu astfel de prototipuri.

În plus, în același mod, putem alege nuanțele care au fost deja văzute sau putem face un element transparent. Puteți face, de exemplu, roșu, ca element de meniu activ. Deci, bine, în principiu, aceasta este o structură simplă, creația ... mai precis nu creația, ci lucrul cu acest serviciu. Există câțiva alți parametri. Să arătăm. Aici puteți spune, elemente, puneți pe partea de sus, unele jos, care este, ca, este straturi în Photoshop. Asta este, dacă vrem să punem acest cerc sub meniu, atunci trebuie să mergem la acest element și să îl punem în fundal, respectiv. După cum puteți vedea, meniul apare în prim-plan. În consecință, dacă ați editat toate aceste elemente, nu doriți să le mișcați accidental de mouse, puteți selecta acest element și apăsați blocarea. În consecință, dacă încercați să mutați acest element, nifiga nu funcționează. Aici avem un indiciu sub forma unei blocări roșii, care ne spune că dacă vrem să editați, trebuie să eliminăm această setare și să putem să o mutăm. Acest lucru se aplică absolut tuturor elementelor. Nu contează ce este: unele blocuri, text sau imagine și așa mai departe. Creat pentru confort. În mod similar, aici, ca într-un Photoshop, există o poveste, este stocată direct pe server, puteți merge înainte și înapoi prin săgeți. Asta este, uita-te la ecran, am faceți clic pe săgeata înapoi, pe săgeata înainte, își amintește unele acțiuni și se poate muta. În principiu, este și o funcție destul de convenabilă. Și, întâmplător, tastele fierbinți sunt exact la fel ca în Photoshop. Destul de convenabil. În plus, putem alinia elementele în raport cu celelalte. Asta este, aici există o astfel de aliniere a parametrilor pe marginea superioară, alinierea în stânga și așa mai departe. În principiu, este foarte asemănător cu elementele unui Photoshop. Și, prin urmare, putem lucra cu un anumit grup de elemente, să ne mișcăm. Dacă trebuie să mutați ceva, îl selectați, apăsați tasta Shift, dacă doriți să continuați să lucrați, faceți clic pe această pictogramă. Dacă mai târziu, atunci când ați lucrat, ați decis că trebuie să lucrați individual - stoarceți acest buton și elementele se mișcă liniștit unul câte unul. Dacă aveți sugestii undeva, puteți activa / dezactiva această pictogramă. Dar acum nu sunt încă, să scriem undeva. Doar scrie pentru un exemplu. Am ascuns-o și am arătat-o. Când avem un astfel de spațiu în puncte - înseamnă că avem un indiciu aici. Când plasăm mouse-ul peste mouse, apare textul sfatului. Este același lucru aici. În consecință, dacă vă împiedică, dați clic pe această pictogramă și acestea dispar, astfel încât să aveți un aspect curat.







Bine. Cu programul, aproape că ne-am dat seama. Sunt mai multe funcții rămase. Aici putem schimba și aici această rețea. Asta este, acum avem patrate, aici putem schimba foaia obișnuită de hârtie și, în consecință, coloana. Exact aceeași rețea este modulară ca în Photoshop. Mai mult, putem porni sau opri această rețea. Nu știu ce afectează această afacere, indiferent cât de greu încerc. Mai mult, putem modifica mărimea acestor distanțe, respectiv a coloanelor. După cum puteți vedea, creștem și pătratele devin mai mari. Atunci putem schimba ... ideea ar trebui să se schimbe ... culoarea acestor linii este aici, dar din anumite motive nu se schimbă. Cel puțin nu văd o figură.

Acum, să vorbim despre algoritmul pas cu pas, cum desenez aceste machete. Sincer, prietene, aș recomanda să folosiți manual o hârtie simplă, pentru că acest proces este mult mai rapid, mai interesant și el, spre exemplu, dezvoltă unele dintre abilitățile de proiectare. Aici totul se întâmplă destul de mult și vă recomandăm să utilizați acest serviciu dacă doriți să faceți o mică prezentare a clientului, astfel încât acesta să pară mai frumos, să zicem așa, și prezentabil. Deci, hai să deschidem o foaie nouă acum și voi pas cu pas să vă spun ce trebuie să faceți, cum să desenați. Adică, voi lua un creion obișnuit pe care să-l arăt. În consecință, primul moment determin întotdeauna lățimea aspectului. De obicei, devine imediat evident din sarcina tehnică, în care înțelegeți ce va fi publicul țintă sau clientul vă limitează imediat - spune că aici va exista o lățime și pur și simplu vă veți ciocni. Să spunem că la 800 de pixeli lățime. Există diferite cazuri. Uneori, presupuneți un împrumut, iar clientul spune că este necesar să se facă, de exemplu, 640 de pixeli în lățime. Dar există diferite ciudățenii de clienți, așa că în primul rând eu determină lățimea. Apoi, trag un capac. Adică, îmi place să desenez ideea și ce va fi acolo. Aceasta, de exemplu, niște munți, o casă. Dacă te uiți la modul în care pictez pe hârtie, aproape totul se întâmplă. Să spunem că o familie este așezată aici, de obicei așez aici săgețile aici și semnez, pentru că atunci când încep să desenez în câteva ore în Photoshop, nu înțeleg ce am pictat. Prin inscripții, în consecință, este de înțeles. Vă recomandăm să utilizați aceeași metodă. În plus, pot să scriu ce efecte va avea. Apoi, lucrez la un meniu, adică diferite elemente. Apoi avem blocuri cu conținut diferit. Adică, de exemplu, știu că vom avea 3 blocuri identice, ele vor fi aceleași și, mai exact, lucrez singur, pentru că nu văd nici un motiv să fac același lucru cu ceilalți, deoarece ele sunt aceleași. Prin urmare, eu iau acest bloc, lucrez la el mai exact. Adică, aici admitem că va fi un fel de imagine, aici - un buton, aici - vom avea un text cu aliniere stângă, aici, să zicem, un fel de referință. În consecință, din moment ce La noi, aceste elemente se repetă, aveți nevoie doar de un astfel de element de tras. Și, în consecință, ultimul moment în care lucrăm la subsol, unde există diferite linkuri, meniuri, probabil, duplicate și așa mai departe. Asta este, astfel de informații nu absolut importante. Asta e tot.

Să repetăm ​​și să scriem, probabil, într-un format de figuri. Primul punct este lățimea. Al doilea punct este pălăria. Al treilea punct este meniul (un punct destul de important, deoarece navigația este importantă pe site). Al patrulea este blocuri cu conținut. Puteți să vă referiți aici ca niște imagini, câteva blocuri cu text, carduri de produse în magazinul online, o formă de umplere și așa mai departe. Pe scurt, tot ceea ce are o astfel de formă, adică un fel de pătrat care are o limită vizuală delimitată sau nu, și există unele, în general vorbind, informații. Aici împărți toate aceste elemente în blocuri atât de diferite. Și, în consecință, în al cincilea moment, am întotdeauna o pivniță sau ceea ce se numește subsol. Sincer vorbind, o astfel de schemă simplă. Din nou, pentru a înțelege în ce fel funcționează cel mai bine: pe o bucată de hârtie sau pe un computer, încercați în ambele sensuri. Tu însuți vei înțelege care dintre ele îți place cel mai bine, care lucrează mai repede și mai eficient pentru tine și, deci, decide pentru tine, cu ce vei lucra în viitor. Și am venit fără probleme, prieteni, la temele noastre. Da, aproape că am uitat, acestea sunt elementele pe care lucrăm, mai întâi lucrăm prin pagina principală - pagina la care se află persoana. Când am lucrat la toate aceste elemente, trecem la desenarea paginilor interne. De ce? Deoarece majoritatea elementelor de pe pagina interioară se vor deplasa de pe pagina principală. Pentru că exact aceeași lățime va fi, exact aceeași pălărie, exact același meniu, numai blocurile se vor schimba, subsolul va rămâne. Adică, în paginile noastre interne, există în esență doar un punct care se schimbă - al patrulea (blocuri). Totul rămâne același cu noi. Prin urmare, vom dezvolta mai întâi pasul principal și, în consecință, cel de-al doilea moment vom dezvolta cele interne. Dacă tu, să spunem așa, vrei să devii mai întâi intern, atunci du-te la principiul nu-l face, pentru că vei petrece mult timp. Este necesar să mergem exact în această direcție. Ei bine, în acest sens, vom termina. După cum am spus, vă recomand să încercați amândouă. Cred că veți înțelege că este mai ușor să folosiți o bucată de hârtie. Puteți să tipăriți aici un șablon, să încercați să pictați pe el.

Vă mulțumim pentru atenție și vă vom vedea curând!

Secretele de Web Design







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: