<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Web design studio &#187; Web design</title>
	<atom:link href="http://blog.web-design-studio.ro/category/web-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.web-design-studio.ro</link>
	<description>Apopii Dumitru - Freelancer, front-end developer</description>
	<lastBuildDate>Fri, 11 Mar 2011 09:07:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.1</generator>
		<item>
		<title>Cum sa creezi un site Web ?</title>
		<link>http://blog.web-design-studio.ro/cum-sa-creezi-un-site-web/</link>
		<comments>http://blog.web-design-studio.ro/cum-sa-creezi-un-site-web/#comments</comments>
		<pubDate>Tue, 16 Nov 2010 09:17:54 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Web design]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://blog.web-design-studio.ro/?p=211</guid>
		<description><![CDATA[Te-ai decis sa creezi un site ?  Cel mai probabil va trebui sa faci apel la 2 tipuri de competente pentru a-l realiza : un designer web pentru partea grafica (webdesign) si un programator pentru partea tehnica. Dar cum sa descrii cu precizie designerului si programatorului ceea ce vrei sa obtii cand de fapt nici tu]]></description>
			<content:encoded><![CDATA[<div>Te-ai decis sa creezi un site ?  Cel  mai probabil va trebui sa faci apel la 2 tipuri de competente pentru a-l  realiza : un designer web pentru partea grafica (webdesign) si un  programator pentru partea tehnica.</div>
<div><strong>Dar cum sa descrii cu  precizie designerului si programatorului ceea ce vrei sa obtii cand de  fapt nici tu nu stii prea bine in acest stadiu al proiectului? </strong></div>
<div>Un site e-commerce prost  conceput poate avea efecte catastrofale asupra activitatii dvs. :  vizitatorii gasesc cu greu produsul cautat, design-ul site-ului, oricat  de frumos ar fi, nu este coerent cu consumatorii targetati…</div>
<div>Exista 2 documente esentiale si  complementare pe care trebuie sa le redactati pentru a avea toate   sansele de partea voastra inca de la conceperea site-ului : <strong>brief de creatie</strong> si <strong>wireframe </strong>(schita propunerii grafice).</div>
<div><strong>Redactarea unui bun brief de creatie pentru site-ul tau</strong></div>
<div>Obiectivul unui brief de creatie  este de a permite webdesigner-ului  sa  identifice universul grafic de  referinta in care site-ul dvs. trebuie să evolueze. Există coduri  grafice speciale in functie de tinta la care facem referinta si  nerespectarea lor ar putea pune in pericol identificarea pe segmentul de  piata vizat.</div>
<div>De exemplu, daca vindeti haine  elegante apartinand unei marci de renume si site-ul dvs. nu reflecta o  „atitudine” coerenta cu articolele pe care le vindeti (culori tipatoare,  preturi scrise cu carcatere mari si ingrosate&#8230;.) vizitorii nici macar  nu se vor deranja sa  exploreze site-ul. Universul grafic al unui  astfel de site consta in culori sobre, cu elemente de design elegante, o  punere in pagina aerata si preturi discrete.</div>
<div>Va propunem un <span style="text-decoration: underline;"><strong>sablon de brief de creatie</strong></span> care va va face sa va puneti intrebarile potrivite si va va maximiza  sansele obtinerii unui rezultat in concordantă cu asteptarile dvs. In  acelasi timp va permite webdesigner-ului sa inteleagă mai bine proiectul  dvs. si va castiga timp in crearea acestuia.</div>
<div>1. <strong>Definitie proiect</strong></div>
<div>1.1. <strong>Conceptul</strong></div>
<div>• Explicati pe scurt ideea.</div>
<div>• Caror nevoi raspunde acest site?</div>
<div>• Care sunt punctele forte ale proiectului?</div>
<div>1.2. <strong>Identitate vizuala</strong></div>
<div>• Care este numele site-ului?</div>
<div>• Exista deja un logo? Daca trebuie creat unul, precizati acest lucru.</div>
<div>• Care este ideea de baza a proiectului (sloganul)?</div>
<div>1.3. <strong>Care este raportul   „imagine/ preţ” pe care doriti sa il transmiteti?<br />
</strong>• Propuneti un produs de marca, sau mai degrabă un produs pentru persoane cu buget de criza?</div>
<div>•  Vreti să transmiteti prin intermediul site-ul dvs. imaginea unei firme  cat mai aproape de clienti si deschisa in relatia cu clientii sai sau  imaginea unui „gigant” in domeniu ?</div>
<div>2. <strong>Piata</strong></div>
<div><strong>In ce sector de afaceri vreti sa evoluati?</strong></div>
<div><strong>Cui va adresati?</strong></div>
<div>• Definiţi vizitatorii tinta cat mai exact posibil.</div>
<div>•  Care este contextul personal şi profesional, interesele lor,  preocuparile lor, valorile lor? De exemplu: persoane juridice, mediu  urban, peste 30 de ani, mama tanara, parinti cu copii, persoane  sensibile la problemele de mediu, etc). Daca exista mai multe obiective,  accentul trebuie pus pe obiectivul cel mai important, care va  reprezenta cel mai mare potential de trafic.</div>
<div>• De ce au nevoie clientii de aceste produse, aceste servicii ?</div>
<div>2.3.<strong> Cine sunt concurentii? </strong></div>
<div>Această  parte este deosebit de importanta, deoarece putem extrage repere  concrete despre ceea ce exista deja pe site-urile din sfera noastra de  interes, putem vedea tacticile de urmat sau de evitat.</div>
<div>• Identificarea si clasificarea concurentilor in cazul în care există mai multe tipuri + URL-ul site-urilor lor.</div>
<div>• Ce propun ei ?</div>
<div>• Care sunt diferentele in comparatie cu proiectul dumneavoastră?</div>
<div>• Exista lucruri care vă plac din design-ul site-urilor concurente sau functionalitati intresante pe care ei le ofera?</div>
<div>
<p>• Ce nu va place la site-urile concurente?<strong><strong> </strong></strong></p>
<p><strong><strong>3. Site-ul<br />
</strong></strong>3.1. <strong>Ce ar trebui sa spuna utilizatorii atunci cand ajung pe site-ul (pagina de start sau alta pagina)?</strong></p>
</div>
<div>• Hei, in sfarsit un site care iese in evidenta printre altele de acest gen !</div>
<div>• Ce produs minunat! Trebuie sa-l am neaparat!</div>
<div>• Acest site inspira incredere. Pare a fi un loc bun pentru a cumpara produsul pe care il vreau.</div>
<div>• Pe acest site cred ca voi găsi ceea ce vreau mai rapid decât oriunde in alta parte</div>
<div>• Pare a fi multa lume aici! Mi-ar placea să ader la aceasta comunitate.</div>
<div>• Etc &#8230;</div>
<div>3.2. <strong>Ce ar trebui sa faca utilizatorul odata ajuns pe site-ul dvs. ?</strong></div>
<div>• Lansarea unei cautari pentru a gasi produsul cautat?</div>
<div>• Sa se inscrie pentru a deveni un membru al comunitătii?</div>
<div>• Cumpere un anumit produs?</div>
<div>• Sa isi spuna opinia?</div>
<div>• Etc &#8230;<strong><strong><strong><br />
</strong></strong></strong>3.3. <strong>Care sunt valorile / conceptele pe care trebuie sa le transmită site-ul?</strong></div>
<div>•  Ce valori doriţi să transmiteti sau să impartăsiti cu publicul tinta  prin intermediul site-ului? De exemplu: incredere, expertiza,  proximitate, valorile de comunitate, de schimb de informatii, distractie  &#8230;?<strong><strong><strong><br />
</strong></strong></strong>3.4.<strong><strong><strong> Care sunt principalele caracteristici / secţiuni ale site-ului?<br />
</strong></strong></strong>Descrierea cat mai exact posibil a continutului secţiunilor  site-ului. Daca doriti un meniu care se deschide intr-un anumit fel, sau  ca o informatie sa fie pusa in valoare mai mult decat altele. Ideal ar  fi sa furnizati o arborescenta a site-ului – Wireframe sau storyboard. <strong><strong><strong><br />
</strong></strong></strong>3.5. <strong><strong><strong>Care sunt site-urile de referinta si cele care va displac?<br />
</strong></strong></strong>In cele din urmă, este important să se ia in considerare gusturile dvs. personale caci trebuie sa fiti mandru de site-ul dvs.</div>
<div>• In general, care sunt site-urile care va plac din punct de vedere grafic?</div>
<div>• Care sunt site-urile care va plac din punct de vedere al functionalitatii?</div>
<div>
<p>• aceleasi intrebari pe site-uri care nu va plac. <strong><strong><strong> </strong></strong></strong></p>
<p><strong><strong><strong>4. <strong>Munca ceruta</strong><br />
</strong></strong></strong>In primul rand, cereti realizarea de 2 sau 3 exemple de  grafica pentru pagina de start, astfel incat sa aveti de unde alege.Daca  nu aveti un logo, este timpul să spuneti! <strong><strong><strong><br />
4.2. <strong>Lista livrabilelor şi formatul</strong><br />
</strong></strong></strong>Livrabilele sunt elementele pe care le veti recupera de la  webdesigner. Acesta trebuie să fie foarte specific deoarece acest lucru  defineste ce va trebui el sa realizeze in cadrul proiectului  dumneavoastra.</p>
</div>
<div>Livrabilele sunt  paginile pe care trebuie sa le creeze si livreze celui care le va  intergra (cel care va dezvolta vizibil site-ul dvs.).</div>
<div>• Acasa</div>
<div>• Pagina motor de căutare</div>
<div>• Pagina de tipul fisa de produs</div>
<div>
<p>• Pagina de tipul Profil membru<strong><strong><strong> </strong></strong></strong></p>
<p><strong><strong><strong> </strong></strong></strong>Toate elementele trebuie sa fie furnizate in format JPEG  si PSD (Adobe Photoshop) sau AI (Adobe Illustrator).</p>
</div>
<div>Dacă  webdesigner-ul şi programatorul sunt aceeasi persoana, acest proces  este simplificat pentru ca el stie ce trebuie sa faca pentru a face  site-ul dvs.</div>
<div><strong><strong><strong><br />
4.3 Buget şi timp<br />
</strong></strong></strong>Trebuie sa specificati  bugetul pe care puteti sa-l  investiti in site? Un subiect controversat. Majoritatea vor spune ca  daca specificati bugetul dvs., furnizorii automat incearca sa ramana la  limita superioară, in mod justificat sau nu.</div>
<div>Specificati cand doriti ca  site-ul sa fie terminat, astfel incat webdesigner-ul sa poata estima cat  timp să dedice pentru proiectul dumneavoastra.</div>
<div>Aceasta faza de proiectare este  una dintre cele mai importante pentru a asigura buna desfasurare a  proiectului. Realizarea Wireframe-ului va permite materializarea  concreta si in detaliu a ceea ce va conţine site-ul dvs.</div>
<div><strong><strong><strong><br />
</strong></strong></strong></div>
<div><strong><strong><strong><strong>Cum sa proiectezi interfata site-ului ?</strong></strong></strong></strong></div>
<div><strong><strong><strong><br />
1. <strong>Ce este un wireframe?</strong></strong></strong></strong><strong><strong><strong> </strong></strong></strong></div>
<div>Wireframe-ul este o reprezentare schematică a interfetei unui site şi este utilizat pentru a defini:</div>
<div>• structura sa de ansamblu,</div>
<div>• relaţia dintre fiecare intrare sau fiecare pagina</div>
<div>• conţinutul de orice tip (text, titluri, imagini, document video de download) si localizarea lor in pagini,</div>
<div>• ergonomia fiecarei pagini.</div>
<div>Obiectivul acestui document  este, prin urmare, pregăatirea pentru faza de proiectare grafica si  dezvoltare tehnica a front office-ului.</div>
<div><a href="http://3.bp.blogspot.com/_c8gpQ71hYGw/TN_1S3ol-RI/AAAAAAAAAD0/apC-c9L1D3E/s1600/wireframe+mojofat.com.gif"><img src="http://3.bp.blogspot.com/_c8gpQ71hYGw/TN_1S3ol-RI/AAAAAAAAAD0/apC-c9L1D3E/s320/wireframe+mojofat.com.gif" border="0" alt="" width="301" height="320" /></a></div>
<div>
<p><strong><strong><strong></strong></strong></strong></p>
<p><strong><strong><strong>2. Care sunt avantajele wireframe-ului în procesul de proiectare şi de concepere a site-ului?<br />
</strong></strong></strong>Cu cat site-ul este mai complex în termeni de conţinut si  functionalitate, realizarea wireframe-ului devine un exercitiu necesar.<strong><strong><strong></strong></strong></strong></p>
<p><strong><strong><strong></strong></strong></strong>In cazul unui site e-commerce, wireframe-ul e o cale de a te  asigura ca fiecare pagina este optimizata pentru a permite  achizitionarea facila  (butoane de cumpărare plasate in locuri  strategice, link-ul formularului de contact sau numărul de telefon sa  fie vizibile) si, prin urmare vom spera ca o sa avem un site profitabil.  <strong><strong><strong></strong></strong></strong></p>
<p><strong><strong><strong></strong></strong></strong>Este nevoie de timp pentru a obţine un rezultat optim, dar  este un document de care nu trebuie sa te lipsesti daca vrei să fii  sigur că va fi proiectat bine site-ul web.<strong><strong><strong></strong></strong></strong></p>
<p><strong><strong><strong>Pentru dvs. avantajele sunt:<br />
•</strong></strong></strong> wireframe-ul va va face sa va puneti o multitudine de  intrebari, pe masura ce reflectati la ceea ce trebuie sa includa fiecare  pagină a site-ului.</p>
</div>
<div><strong><strong><strong><br />
Pentru web designer:<br />
•</strong></strong></strong> Vizualizeaza exact ce trebuie să puna pe fiecare pagină şi  intelege imediat care sunt elementele pe care trebuie sa le scoata in  evidenta si care sunt elementele secundare. Webdesigner-ul va putea  lucra, prin urmare, mult mai bine, mai repede.<strong><strong><strong></strong></strong></strong></p>
<p><strong><strong><strong>Pentru programatori / integratori:<br />
• </strong></strong></strong>Ei vizualizeaza imediat modul de functionare al  instrumentelor pe care trebuie sa le dezvolte, iar acest lucru permite  economisirea de timp semnificativ in explicatii.</p>
</div>
<div><strong><strong><strong><br />
Atat pentru webdesigner cat si pentru programatori<br />
• </strong></strong></strong>Deoarece lucreaza pe baza aceluiasi document, aveti  garantia ca inteleg la fel ceea ce vreti sa obtineti, si se vor coordona  mai bine intre ei. Din nou,se economiseste timp si eficienta.</div>
<div><strong><strong><strong><br />
3. Cine face wireframe-ul?</strong></strong></strong></p>
<p><strong><strong><strong></strong></strong></strong>In general, wireframe-ul este proiectat de un expert in  conceperea de site-uri care stapaneste aspectele grafice, ergonomice,  editoriale si tehnice.</p>
</div>
<div>Cele mai confortabil (dar, de asemenea si cel mai scump) este sa incredintezi această lucrare, unei agentii.</div>
<div>La fel de eficace (si mai  ieftin) este sa apelati la un consultant independent, care se va ocupa  de intreaga proiectare a site-ului. Puteţi merge apoi cu wireframe-ul  dvs. la un freelancer sau o agentie web.</div>
<div>
<p>Ultima opţiune, sa faceti singur  un wireframe cu ajutorul instrumentelor dedicate, dar daca va lansati  intr-un proiect de e-commerce, fara nicio experienta in acest domeniu,  veti avea nevoie de parerea unui profesionist inainte de a incepe faza  de creare si dezvoltare a site-ului pentru a va asigura ca rezultatul  final va fi unul satisfacator.<strong><strong><strong></strong></strong></strong></p>
<p><strong><strong><strong>4. <strong>Ce instrumente se folosesc pentru a proiecta un wireframe?</strong></strong></strong></strong></p>
<p><strong><strong><strong></strong></strong></strong>Aici gasiti : <a href="http://www.cmswire.com/cms/enterprise-20/web-design-top-7-wireframing-tools-updated-003887.php">Top 7 Instrumente de Wireframe</a></p>
</div>
<div>De asemenea se poate folosi  Powerpoint-ul care are meritul de a permite realizarea unor lucruri  foarte simple sau foarte complexe in functie de nivelul lor si natura  proiectului.</div>
<div><em><br />
Surse : </em><a href="http://optimizare-site-google.blogspot.com/2010/11/cum-sa-creezi-un-site-web.html" rel="nofollow" target="_blank">http://optimizare-site-google.blogspot.com</a><br />
<em><br />
Imagine: mojofat.com </em></div>
]]></content:encoded>
			<wfw:commentRss>http://blog.web-design-studio.ro/cum-sa-creezi-un-site-web/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

