Din sfera designului, evident. Ideea acestui post mi-a venit dupa ce am vazut la Nelutu o lista foarte utila de siteuri cu resurse/tutoriale.
Eu nu am rabdare sa verific ce a aparut nou pe diferite siteuri, odata la 2 zile ma uit in google reader daca a mai aparut ceva interesant(si daca gasesc, dau un tweet sa afle si altii). DAR multumita Twitter, aflu repede daca a aparut un articol util, o colectie de teme gratuite, brushuri, tutoriale.
Asa ca am sa fac aici o lista cu “sursele” mele, ce ma tin la curent cu tot ce misca in lumea designului grafic.

@smashingmag-Orice designer stie ce-i Smashing Magazine. Foarte activi pe twitter, recomand.
@DesignerToday-Stiri, tutoriale, resurse. Must follow!
@webdesign_news-Printre cele mai bune surse de informatie despre tendinte noi aparute, tutoriale…de toate.
@photoshopguides-Tutoriale Photoshop.
@Photoshop_PSD -linkuri zilnic catre tutoriale foarte utile
@DesignerDepot-una din cele mai populare bloguri despre design, updateuri frecvente cu cele mai noi tendinte, sfaturi, etc.
@line25blog-resurse, articole despre design
@thewebbased-linkuri catre concepte deosebite, sursa de inspiratie pentru designeri.
@inspiredmag-tutoriale, inspiratie, tips&tricks. Tweeturi multe si folositoare.
@1stwebdesigner-Web design, updateuri zilnice cu articole noi aparute ce tin de acest domeniu.
@mytemplatebox-Cele mai noi templateuri, teme gratuite.
@mirkohumbert-Un designer excellent, foarte activ pe twitter, multe de invatat de la el.
@BazDeas-Designer nu chiar activ, dar tweeturile lui contin linkuri catre resurse “must have”.
@myinkblog-Blogger designer, resurse utile si update frecvent.

E o lista scurta, dar daca tineti pasul cu tweeturile celor de mai sus e de ajuns pentru a fi cat de cat la curent cu “moda” in design.

Sau speculative work. Sau munca pe gratis. Fenomen din ce in ce mai raspandit pe siteurile de outsourcing pe care le “frecventez” (ii drept, mai rar in ultimul timp). Dar avand in vedere ca sunt in stand-by de ieri pana marti-miercuri, am zis ca poate-poate iese de-un suc si de acolo. Si am intrat intai pe RAC(Rentacoder), considerand ca am mai multe sanse sa gasesc acolo ceva rapid(chiar daca mai ieftin).

Si caut proiecte. Si gasesc, logo design, banner design…si citesc, si mi se potriveste stilul, pretul limita e ok…si bang!!! “Bids without mock ups will not be considered!” La primul, evident am dat pur si simplu close si am trecut mai departe. Dar cand deja am vazut aceasi fraza la 3 posturi din 5, mi s-a parut ciudat. Postezi o cerere de logo design, pui bid maxim (deci MAXIM) $50 si ceri “mostre”. Inteleg ca in cazul unui incepator fara o schita initiala nu-ti poti da seama de ce e in stare, dar de ce nu esti dispus sa te uiti peste portofoliul meu daca nu-ti trimit mock up? In fine, ma resemnez si caut in continuare. Si gasesc un proiect .psd design pentru un website. Si licitez frumos, prezint portofoliul, chiar ii extrag de acolo cateva lucrari similare cu ce vrea el. Si astept. Si reply-ul vine prompt, in nici 10 minute. Reply care la sfarsit contine urmatoarea fraza: “Let me know if you can create a very fast mockup for me to review before bid acceptence, as I have some bidders who agree to that.” Si ma apuca rasul. Fast forward, astazi. Nici n-am mai intrat pe RAC, am zis ca incerc pe GAF(GetAFreelancer), chiar daca e concurenta mai acerba, se plateste mai bine si e un loc mult mai civilizat. Si licitez(evident, sarind peste tot ceea ce include “draft”, “mockup”). Si din nou, un reply prompt. Tot asa…“Can you send me some mockups” (fara semnul intrebarii).

De retinut ca i-am raspuns la fiecare, explicand foarte elegant ca oricat de flexibil as fi in ceea ce priveste acomodarea cu fiecare proiect in parte, nu lucrez fara acoperire (sau ceva de genu). Primul n-a dat niciun semn dupa, dar nici n-a dat proiectul la cineva, al doilea mi-a mai trimis un mesaj: “(…) but its ok if you dont want to work.”

Putina analiza. De la ce porneste aceasta frica de a contracta un freelancer exclusiv pe baza de portofoliu? Acordand acestor clienti prezumtia de nevinovatie (adica sunt oameni onesti), cauza e clara. Designeri tepari, lenesi, neseriosi, hoti. Si sunt destui d-astia. Care fura un portofoliu si se prezinta cu el, sperand ca vor fi in stare sa scape…si nu scapa. Sau designeri care cred ca pot lucra la 10 proiecte deodata cu un deadline strans. Si nu reusesc. Sau designeri care pur si simplu isi pierd cheful si neavand nici cel mai mic respect pentru client, dispar pur si simplu. Si evident, clientul patit devine mai retinut. Si pentru el din start cei care nu sunt dispusi sa-i prezinte ceva inainte de a castiga proiectul sunt prea putin interesati de acesta, deci probabil nu merita.

DAR, multi dintre acesti clienti rateaza un aspect. Aspectul material. Pe mine, ca designer(amator), rareori ma motiveaza proiectul in sine(a se citi proiectul in sine, fara speculatii va rog). Nu ma incalzeste cu nimic ca a aparut pe piata o noua firma de consultanta financiara sau un produs de slabit. Dar daca ma platesti bine, intru foarte usor in starea de “asta visez, asta pictez”. Pentru ca banii conteaza.

Si aici gresesc multi dintre cei care cer mock ups pe siteuri gen RAC. Chiar daca vorbim de spec work, nu cresc recompensa, nu motiveaza designerii buni sa participe. De ce sa particip si sa risc sa nu primesc nimic(si pierd o groaza de timp), cand pot avea aceiasi bani cu munca sigura?
Unii carcotasi ar spune ca daca esti bun, esti sigur ca vei primi proiectul. Gresit, designul si in special perceptia clientului asupra unui design este subiectiva. Faptul ca esti designer de top nu garanteaza ca mostra ta gratuita va fi preferata de client. Punct. Asa ca de ce sa-ti asumi riscul?
Solutia? Un pret corect. Uitati-va la 99designs. Au sabloane de preturi, vrei asta platesti aproximativ atat. Evident, platesti de 10 ori mai mult, dar asta e daca vrei sa-ti permiti luxul de alege dintre 30 de concepte in doar 3-4 zile. Si recompensa motiveaza designerul. Uitati-va acolo, nu cred sa fi fost un concurs(pe care l-am vazut) in care sa nu-mi fi placut mie personal macar o propunere.
Si vazand sistemul de acolo ramai dezamagit cand vezi ce se intampla pe Rentacoder&co. Inteleg si accept ca este vorba de un concept mai low-budget, dar de aici pana sa ai pretentia sa primesti exact acelasi tratament pentru 10% din pret e mult. De aceea NICIODATA nu voi fi de acord cu forma de spec work practicata de unii useri de pe RAC. Vrei optiuni multiple INAINTE sa accepti bidul? OFERA UN PRET CARE SA MERITE SA-MI PIERD TIMPUL!

Exista insa si o alta latura a acestei practici. Pseudoclientii. Care, indiferent de recompensa promisa, inca din primul minut stiu ca nu vor plati. Pentru ca singurul lor scop este sa adune idei. Pentru ca nu-i asa, logoul FedEx e al naibii de simplu? Oricine il poate desena. Dar la un moment dat cineva a venit cu ideea. Si n-a fost nea’ Gheo de la aprovizionare. Asa ca, daca am ramas in pana de idei, postez rapid un proiect pe RAC sau 99designs, si astept sa curga propunerile. Imi place una? Pac, o fur. Ce daca are watermark pe ea? Nu vad forma de un amarat de text suprapus? Ce daca e protejat de copyright? Va sta designerul sa verifice daca i-am furat munca?
Vedeti, asta e principalul motiv pentru care NICIODATA nu lucrez inainte sa vad banii in escrow. Cu clientii privati e mai simplu, majoritatea sunt clienti fideli, de incredere si se aplica metoda “initial deposit” (rareori fac exceptie, cand e vorba de siteuri…sunt mai greu de furat). Dar nu-mi place sa ofer sanse celor care incearca sa profite de dorinta mea de afirmare.

Indemnul meu (nu de parca ar conta)…evitati spec work, sau “practicati-l” intr-un sistem consacrat! Timpul e prea pretios sa-l pierdeti cu cei care se ghideaza dupa motturile:”cum sa fac sa-l tepuiesc/fraieresc”, “cum sa-l fac sclavul meu”.

Am inceput sa scriu despre vector/raster intr-un articol anterior. Cred ca am explicat destul de bine care e diferenta. Acum, sa vedem cum se manifesta aceasta diferenta la nivel de software. Nu va fi un articol foarte tehnic, cum se fac vectori in Photoshop va explic in 2 randuri (si 2 imagini), voi scrie mai mult despre cand si cum sa combini, format & stuff.

In primul rand, intrebarea care-i macina cel mai mult pe designerii amatori, dornici de ceva banuti (in special din logouri). Se poate face grafica vectoriala in Adobe Photoshop? DA! Chiar daca PS este un software dedicat in special graficii raster, are si tool-uri pentru grafica vectoriala. Pen tool si Shapes. Mai simplu, adaug cateva imagini, sa vedeti cum se nasc vectorii in Photoshop.



Important e sa folositi intotdeauna Shapes sau Pen tool setate pe Shape layers. Astfel fiecare noua forma va fi adaugata pe un strat nou cu vector mask. Adica asa va fi vector. Bun, asta ii simplu, acum n-aveti decat sa desenati logouri cat vreti. De retinut, ca daca faceti forme vectoriale nu puteti aplica efecte raster. De exemplu peste un shape nu puteti da cu Burn sau Dodge tool. Incercati, veti vedea ca veti fi intrebati daca vreti sa fie “rasterized” intai.

O alta chestie. Textul. In mod editabil, textul se comporta ca un vector shape. Se poate mari sau micsora fara problema. La fel, incercati, scrieti un text si trageti de el. See? Dar pentru a putea fi tiparit, nu e de ajuns sa aveti fisierul sursa, este neaparata nevoie de font. Fara includerea fontului, acesta va fi substituit cu altul. Si asta nu e bine. De aceea, daca ati facut sa zicem un afis in Photoshop, si vreti sa mergeti la tipar cu el, dati Rasterize la straturile de text. Bine, evident ca asa devine raster si isi pierde vectorialitatea(fain cuvant, asa-i?).
Altceva. Formatul in care salvati. Fisierul sursa .psd salveaza frumos pe straturi asa ca salveaza si vectorii. Dar un fisier .psd cu straturi intacte si design complex ii mare. Mare ca megabytes. Zeci de megabytes. Chiar sute. Asa ca veti prefera sa salvati si-n alte formate. .eps si .pdf sunt formatele pe care le-am folosit pentru a conserva vectori. .eps si el ajunge la dimensiuni astronomice, .pdf e mai decent. Dupa cum vedeti, lucrul cu vectorii in Photshop pare simplu, mai greu e la compatibilitate, si partea cu “sa fim siguri ca salvam vectori”. De ce? Pentru ca Photoshop n-a fost conceput special pentru asa ceva, a fost conceput pentru grafica bitmap, manipulari foto. Si la acest capitol e ‘al mai tare. Ii vedeti puterea zilnic in reclame, pe internet, pe Photoshopdisasters… Si da, pentru asa ceva trebuie folosit. Se poate si pentru vectori, dar pentru aia exista alt software, de ce sa ne chinuim cu unul care nu e fix pentru aia? Daca o luam asa, putem face grafica si in Paint, da’ pentru ce naiba?

La ce folosesc eu Photoshop? In primul rand, web-design. Crearea de layouturi pentru web nu implica necesitatea graficii vectoriale, si avand in vedere ca detaliile conteaza, e mult mai lejer si de efect sa le desenez in Photoshop. Pot aplica o gama variata de efecte, mici chichite ce confera siteului un aspect “pro”. De asemenea, multe resurse gratuite…texturi, brushuri. Apoi, photo manipulation (aici e evident, asa-i?). Cateodata mai tunez cate un logo ce va fi folosit predominant in mediul online. Bannere publicitare pentru siteuri. Animatii GIF! (Este extraordinar de simplu si de efect, daca am timp, scriu un articol despre asta). Am facut si cataloage si brosuri si postere pentru tipar pe vremea cand n-aveam Illustrator (scump, si nu exista dincolo mai ieftin).

Banuiesc ca v-ati dat seama ca acum voi vorbi putin si despre Illustrator. Nu mult, doar cat sa-i fac pe cei care folosesc exclusiv Photoshop sa incerce. In primul rand, multi photoshopisti se sperie cand il deschid prima data. Pare atat de asemanator si totodata atat de diferit. Eu personal in afara de Pen tool si Text tool nu-mi dadeam seama ce cum functioneaza si la ce se foloseste. A trebuit sa caut pe internet cum se fac gradienturi. La fel, mi-a luat ceva timp pana sa-mi dau seama cum imbin/tai forme. Dar dupa ce m-am obisnuit, rezultatele au fost din ce in ce mai bune. Logourile parca din start ies mai bine. Mai curate, simple, dar cu stil. Iar aceste forme sunt foarte usor de manipulat. Culori, grupuri…Este mai simplu, mai relaxant. Tot aici vine si partea de hand-drawing. Incercati sa desenati ceva cu brushul in PS si dupa aceea in Illustrator. Maare diferenta.

Apoi, din punctul de vedere al cuiva care se vrea prestator de servicii designaresti, mai este si marketingul. Altfel se uita un client la tine cand spui ca “Deliverables in .ai vector source files” decat daca ai spune “full layered .psd file”.

Textul(paralela cu PS). La fel, daca lasati textul in mod editabil, veti avea nevoie de font daca vreti sa-l tipariti. DAR, daca dati “Create Outline” textul se transforma in Shape si surpriza, ramane vector. Ce imi place mult, este ca pot schimba culorile formelor foarte usor. Doar cu un singur click.
Si dimensiunea fisierelor. Nu mai trebuie sa fac desene la 5000 de pixeli sa am fisier de 500 MB, un fisier sursa .ai pentru un logo se mentine de ordinul KB-ilor.

Chiar daca e software pentru grafica vectoriala, nu refuza nici imagini bitmap. Exista chiar si functia Rasterize.
La ce il folosesc? Logouri, carti de vizita, afise, brosuri(n-am facut multe brosuri, recunosc).
Dezavantaj mare e ca n-are treaba cu photo manipulation. Adica n-aveti cum sa va faceti tenul mai frumos, sa taieti din burta in mod realist, .etc. Din cauza asta pare un program incomplet. De fapt este unul specializat.

In concluzie, pentru inceput e de recomandat sa folositi Photoshop, stie cam de toate si mai ales daca n-aveti bani de 2 programe(sunt scumpe), PS e mai distractiv, sigur v-ar atrage mai mult. Exista si o alternativa gratuita, Gimp, n-am avut ocazia sa testez. La Illustrator exista un competitor foarte serios, mult mai popular: CorelDraw. L-am folosit in liceu, cumva tot m-am orientat spre Illustrator. Inkscape este o alternativa open-source, l-am testat doar superficial…merge.

Din nou am scris destul de mult, probabil voi mai adauga lucruri pe parcurs, sunt sigur ca am uitat unele lucruri.

De curand am avut de facut un logo. Clientul mi-a explicat ca vrea sa-l foloseasca si pe panouri publicitare si pentru asta are nevoie de un format .psd la rezolutie de 5000+ pixeli. Evident ca i-am explicat ca mai bine ii fac logoul in Illustrator si nu mai are batai de cap (bineinteles, cu explicatii “tehnice”). Asta e motivul acestui post, sa vedem putin cand si cum folosim unul din programele de editare grafica. Cunoscatorii stiu deja diferentele dintre cele doua aplicatii, dar stiu ca exista multi designeri incepatori care sunt nelamuriti in ceea ce priveste aspectul raster/vector.

Bun, sa incepem cu teoria. Raster/Bitmap. Cuvantul cheie e “pixel”. Imaginea, elementul grafic e compus din pixeli, patratelele alea mici care mor pe monitoare LCD. Mai pe tehniceste, sunt cele mai mici elemente purtatoare de informatie dintr-o imagine. Probabil stiti si voi, ati vazut fotografii, ati dat zoom, etc. Ce e de retinut aici e ca imaginile bitmap sunt dependente de rezolutie. Un element grafic mare are o rezultie mai mare (evident).

Avantaje: editare foto, editare mai detaliata, rezultate mult mai realiste, cu efort “minim”. Mai toate creatiile pentru web au ceva de-a face cu raster graphics. Pentru ca e mai accesibil, si cum am spus, de efect.

Dezavantajele apar in special cand vine vorba de print. Adica sa punem designul si pe foaie, masina, billboard, breloc & stuff. Problema e dimensiunea, mai precis faptul ca nu se poate mari. Sa retineti: NU SE POATE FACE DINTR-O IMAGINE MICA (BITMAP) UNA MARE FARA PIERDEREA CALITATII. Probabil ati incercat si voi sa “trageti” de unele imagini sa se potriveasca in afisul creat si ati stricat toata compozitia. Eh, pentru ca nu se poate!

Uite, exemplu.
Logoul de pe acest site, in format bitmap.
Versiunea 1, dimensiunea originala, totul e ok:

Versiunea 2, marita.

Epic Fail! Arata urat. Si asta pentru ca e bitmap. Cand cresteti dimensiunea unei imagini, cresteti de fapt rezolutia, numarul de pixeli. Si asa in jurul fiecarui pixel original, care avea o anumita informatie despre imaginea respectiva, se “aduna” mai multi pixeli noi, care n-au “informatii”. Softul incearca sa compenseze aceasta lipsa, prin “copiat”. Va explic in mod trivial, sa nu cumva sa esuez. Deci eu sunt blank pixel, pixelul nou-nascut, gol. In dreapta mea e un pixel cu proprietatea “X”. In stanga mea, unul cu proprietatea “Y”. Deasupra un “W” si dedesupt un “Z”. Si eu trebuie sa ma integrez in acest ansamblu. Cum fac asta? Simplu, imi asum cate ceva din atributiile fiecarui vecin. Astfel eu devin asemanator cu fiecare in parte. DAR, mare DAR, din pacate nu stiu cum sa distribui informatia prelucrata, asa ca devin un mare noise. Adica element perturbator. Chiar daca m-am integrat, stric unitatea, din cauza mea, imaginea pierde din calitate, pentru ca n-am fost in stare sa preiau informatii in mod corect. Pentru ca nu stiam ce vrei tu, draga utilizatorule, de la mine.

Exemplu grafic. O imagine 2 x 1 pixeli. Un pixel negru, unul alb. Ce se intampla daca dau un resize la 3 x 1? Uitati!

Da, avem un pixel gri. E aproape alb, si e aproape negru…dar mie nu-mi trebuie pixel gri!
Stiu ca multi stiati acest lucru, dar foarte multi nu. Nu demult m-a rugat un prieten sa-l ajut cu un afis A3, pe care dorea sa puna ca fundal o poza de 500px. Nu merge.

Dezavantaj 2. Dimensiunea fisierului. Bun, sa zicem ca ai inteles care e treaba cu vector/raster, pixeli/curbe. Si totusi vrei un logo bitmap, in format .psd sa zicem. Si iti trebuie pentru un afis mare, asa ca imi ceri 10000px. Si eu nu-ti pot trimite fisierele sursa prin e-mail ca au 300 de MB. Ce facem? Pentru ca da, un fisier bitmap de mari dimensiuni ocupa spatiu. Pentru ca fiecare pixel in parte ocupa memorie. Simple as that!

Dezavantaj 3. Forme imperfecte. Avand in vedere ca un desen e format dintr-un tablou de pixeli(patrati), este evident ca sunt probleme cand vine vorba de curbe. Sa zicem ca desenam un cerc.

Cum arata conturul acestui cerc la zoom de 500%? Uite asa. See what I mean?

In concluzie, grafica raster este optima pentru:
-Manipulare foto, design pentru medii digitale, online.

Nerecomandat pentru:
-Materiale pentru print de dimensiuni mari, se evita folosirea efectelor multiple cand materialul va fi tiparit. Pregatirea pentru tipar o voi trata intr-un articol urmator, e prea mult de scris s-o fac aici.

Bun, si acum sa vedem ce-i grafica vectoriala, si ce ne ofera ea.

Grafica vectoriala, spre deosebire de grafica raster, construieste o imagine folosind functii matematice; curbe, puncte, intersectii pentru a determina forma unui desen, lungimea liniilor…Bine, asta nu inseamna ca designerul trebuie sa fie matematician, este vorba doar de cum percepe softwareul comenzile.

Avantaje:
In special in print. Imagini scalable, care se pot mari la infinit fara a pierde din calitate. Pur si simplu, imaginea vectoriala nu se distorsioneaza. Cand o modificam, se schimba parametri matematici si avem o functie noua. Atat, nu avem ce sa pierdem.
Forme perfecte, sau smooth curves. Un cerc va ramane cerc si la zoom maxim. Ca aici:
.
Contur smooth. Sau o portiune din fisierul sursa al logoului la zoom de 3200%.

Control optim al desenului. O forma se poate modifica usor prin adaugarea unor puncte de “sprijin” de exemplu.
Print-friendly.

Dezavantaje:
Designul limitat. Nu puteti face imagini “photorealistic”-e. Sunteti cat de cat limitati la un ansamblu de forme. Lipsesc efectele speciale atat de indragite de popor. De aceea, mai rar se foloseste in domeniul web, sau se combina cu grafica raster.
Unii spun ca e mai greu de lucrat, trebuie sa cunosti softul destul de bine pentru a crea ceva decent. Bine, asta e din cauza ca multi incep cu grafica bitmap si acomodarea cu un soft vectorial poate fi o surpriza…e destul de diferit.

Optim pentru:
-Materiale pentru print: logouri, bannere, afise…Recomandat pentru concepte ce vor fi aplicate in medii diferite. De exemplu logouri, ce vor fi expuse pe site, carti de vizita, reclame, etc.

Cand nu se foloseste:
-Manipulare foto.

Avand in vedere ca am scris destul de mult, si niciun om intreg la minte n-ar sta sa citeasca inca atat, voi scrie mai detaliat despre softuri intr-un post care va veni probabil in 2-3 zile.

Acest articol nu va trata partea de how to. Aici nu veti invata CSS sau HTML, asta o puteti face cu o simpla cautare pe Google.

Scriu acest post in urma unui e-mail primit de la unul din putinii vizitatori. Omul a facut un layout si mi-a cerut parerea. Din pacate nu mi-a dat voie sa fac un review public, asa ca acum voi vorbi la general si chestii.
Bun, in 2009 din ce in ce mai multi au aflat ca web-designul e pe val si avand in vedere ca resursele sunt destul de accesibile multi incearca sa profite, devenind designeri. Acest post se adreseaza acestor inca neinitiati. Neinitiati care vrand-nevrand comit greseli iar eu voi exemplifica cateva dintre cele legate de estetica si usability.

1. Exces de zel. Sau prea multa grafica. Sau kitsch. Cum vreti voi. E acea situatie in care omul vrea sa creeze ceva atat de frumos incat rezultatul final este pur si simplu odios. Greseala foarte frecventa la multi “first timers”. Nu este vorba de o lipsa de talent sau simt estetic, doar de prea multa dorinta si prea putina experienta. Viitorul designer parcurge 20 de tutoriale despre “cum sa faci un layout in Photoshop” si fiind nerabdator, vrea sa le aplice deodata. Sau doreste sa mascheze faptul ca e incepator incercand sa faca ceva complex. Cred ca ati vazut toti siteuri cu header si navigatie uber-mega-complicata, gradient si texturi peste tot, orice titlu e insotit de un box cu “de toate”. Aici enumar si imaginile-text fara un rost anume. Stiu ca e frumos sa ai un stroke si drop shadow la un text, dar nu mai bine pastrezi totul simplu si editabil? Luate separat, aceste elemente grafice de efect sunt benefice, frumoase, dar aplicate deodata aglomereaza siteul atat din punct de vedere estetic cat si a timpilor de incarcare, si SEO.
Puteti face chestii marunte care sa confere un aspect placut siteului. Faceti acele rounded corners mai elaborate, puneti un mic detaliu in colturi…alta viata. Da, detaliile conteaza, FOARTE MULT!
Si atunci cand desenati un layout, ganditi-va si cum il veti coda. Complicandu-va inutil designul va limitati solutiile de implementare.

2. Supradoza de miscare. De cele mai multe ori se manifesta prin flash. Se misca toate. Pun mouseul pe un buton si incepe sa topaie si sa se invarta si sa clipeasca insistent. Sau cand dau click se destrama pagina ca un puzzle si imi apare un preloader si din nou efectul puzzle. Bine, e frumos cand e vorba de o pagina de prezentare ce contine date de contact si putin altceva, dar daca folositi asa ceva la o pagina care are continut, m-ati pierdut.
Agreez o animatie subtila intr-un header, chiar si ceva simplu in meniu (in vremuri moderne se apeleaza la JavaScript pt. asta), e frumos sa ai senzatia de interactivitate, dar ce e mult e mult.
Tot aici voi include si filmuletele si muzica ce pornesc by default. Nu, nu e interzis sa pui un filmulet, sau o muzica de fundal pe site, dar sa nu porneasca automat. Daca vreau sa-l vizionez sau sa ascult dau eu click. Daca porneste singur, efectul cel mai probabil e ca inchid tabul, pur si simplu ma sperie zgomotul in plus.

3. Culori stridente. Multi au probleme cand trebuie sa aleaga schema de culori. Oare verde se potriveste cu rosu? Oare pare prea gri? Solutia e simpla. Puneti ideea in practica si priviti-o 20 de minute. Daca va deranjeaza catusi de putin, schimbati/modificati. Se spune ca cele mai bune combinatii sunt cele care se regasesc in natura. De aici vine si preferinta pentru albastru+verde (vezi tema XP). Ganditi-va la ochii cititorilor, daca obosesc, pleaca de pe site. Voi ati sta pe un site cu textura roz-galben-fosforescent, chiar daca are continut cat de cat interesant?
Tot aici vine si culoarea si fundalul textului. In acest sens sunt chiar conservator, solutia este simpla. Fundal de culoare deschisa (preferabil alb), text inchis…preferabil negru sau nuante de gri(aici poate fi gri-albastrui de exemplu). Alb si negru se integreaza de minune in orice schema.
Nu-mi plac de exemplu siteurile dark, cu fundal negru si scris alb. Daca ma gandesc bine, nu vizitez niciunul cu aceasta configuratie. Dar asta e o chestie personala. Poti face un site dark avand scris negru pe fundal alb.
Evident chestii gen scris galben pe fundal roz…”Close”.

4. Structura. Daca primul lucru pe care il vad pe un site e bannerul adsense si sub el un banner de afiliere, ce sanse crezi ca sunt sa dau scroll sa vad continutul?
Vreau sa vad din start meniul. Nu ascuns intr-un colt, nu camuflat de imagini. Pentru ca faza cu “vizitatorul trebuie sa gaseasca ce doreste in 10 secunde” nu e vrajeala.
Vreau sa vad continut pe prima pagina. Nu vreau panou de “Choose your language” cand din cele 3 steaguri doar unul e activ. Nu vreau sa trec prin 28 de linkuri cautand ceva pentru ca la final sa fiu intampinat de “Aceasta pagina este in constructie”.

Eu am comis toate aceste greseli la un moment dat. Au fost si situatii mai urate cand le-am comis deodata, si a iesit ceva demn de toata mila. Lucrand pentru clienti au fost situatii cand mi s-a cerut sa pun un filmulet “that starts playing when the visitor enters the page”, si nu am reusit sa explic ca e enervant. Dar macar cand e vorba de un proiect propriu, incerc sa-l fac cat mai usable.

Continuarea intr-un articol urmator.

La prima vedere postul acesta nu prea are treaba cu graphic design-ul, dar va garantez ca are. Orice designer are si scule, nu-i asa? Are un spatiu de lucru…si e important ca acest spatiu designeresc sa fie impecabil. Pana acum o luna aveam un monitor CRT LG Flatron de 17″ care isi facea treaba. In sensul ca imaginea era perfecta, culori impecabile si la o rata de refresh de 85 Hz nici nu era prea obositor. Dar deja era prea mic. Intotdeauna mutam bara de instrumente in Photoshop/Illustrator sa vad un coltisor al imaginii care se ascundea “sub”, intotdeauna eram cu zoomul la indemana…ecranul pur si simplu era neincapator. Asa ca am decis ca e timpul sa trec la ceva mai mare.

Avand cateva experiente nefericite cu diferite monitoare LCD, eram sceptic. Am vazut culori sterse, prea vii, imagine blur la rezolutia nativa, etc. Si mie nu-mi trebuia monitor pentru navigare pe net si mess, trebuia sa iau ceva de calitate. Si totusi parca nu-mi venea sa dau 1000+ Ron pentru asa ceva. Am exclus din start cateva branduri, si dupa o scurta documentare, am zis clar ca imi voi lua ori LG, ori Samsung, ori Philips. Dupa etapa a doua in care am vizitat showroomuri, am citit reviewuri, am comparat preturi mi-am cumparat acest monitor lcd de 22″: Philips 220SW9FB

De ce aceasta alegere? In primul rand dupa ce am cercetat oferta mi-am stabilit un buget de 700 de lei. Nu eram inca decis daca vreau monitor de 20″ sau 22″, daca nu gaseam ceva bun de 22″, ma multumeam cu 20″. Din punct de vedere al gadgeturilor nu imi trebuia ceva foarte hi-tech, nu-mi trebuie TV tuner, boxe incorporate si alte chichite d-astea. Ma interesa aproape exclusiv calitatea imaginii. Alt element important de care a trebuit sa tin cont: sistemul meu subred. Am un amarat de calculator cu placa video FX5500 (varianta tunata de Galaxy), asa ca nu avea rost sa ma complic cu HDMI-uri si altele. Si asa eram ingrijorat sa nu cumva sa am ceva probleme. Asa mi-am achizitionat acest Philips.

Si acum reviewul propriu-zis:
Monitorul a venit impachetat frumos, cu drivere si softuri pentru calibrare, tot ce-i trebuie. Evident, fara pixeli morti. Cand am intrebat la magazin daca pot testa, vanzatorul a facut o fata de parca l-as fi injurat de mama si mi-a spus ca inca n-au avut nicio problema cu monitoarele astea, si oricum daca e ceva am 3 garantie si blablabla. Si eu l-am luat ca atare si din fericire n-am avut surprize neplacute.
La “instalare” n-am avut probleme (pe undeva citisem ca FX5500 nu suporta rezolutia de 1680×1050), totul a decurs lin. La calibrare m-am chinuit putin, nu-mi placea contrastul si luminozitatea default, dar monitorul vine cu un software foarte user-friendly care te ajuta sa-ti “faci” o imagine perfecta.
Dupa aceea am trecut la teste. Intai de toate am deschis Illustrator sa ma minunez de cat spatiu pot avea si ca-mi pot deschide doua imagini si la le pun unul langa altul si nu se suprapun. Apoi am pornit un film. Aaaaaalta viata, decat pe vechiul 1024×768. O mica remarca totusi, aviz amatorilor. Daca va luati asa ceva sa va luati gandul de la CAM, TS, DVD-rip mai low-quality, va dati seama ca in full-screen la 1600 vedeti numai patratele colorate.
Am testat doua jocuri, Live for Speed si FIFA 08 (09 nu ruleaza din cauza placii video). Nici vorba de ghosting.
Deci, dpdv al calitatii imaginii a egalata performantele vechiului CRT. Nu pot spune ca le-a depasit, dar nici nu vroiam asta (le consider perfecte).
In plus, 2 mari avantaje pe care nu le-am luat in calcul dar m-au surpins in mod placut. Ecran mat, adica nu-i d-ala lucios de bate soarele si vezi blocul alaturat in loc de film si faptul ca nu e deloc obositor. Dupa 8-9 ore de stat in fata CRT-ului simteam cum imi chinuie ochii, cu asta pot muri deshidradat in timpul unui proiect mai amplu si nu-mi dau seama ca trebuie sa fac pauza.
Minusuri? Cablul DVI nu este inclus, asa ca am mai facut un drum pan’ la magazin. Dar merge foarte bine si pe VGA. Si pare cam instabil. Adica daca lovesc masa, se balangane in toate partile, puteau sa-l faca putin mai rigid. Ar mai fi unghiul de vizibilitate de 160/160. Dar am testat, si trebuie sa fi cam batut in cap sa nu ti-l iei pentru acest motiv. Adica, cine se uita la monitor din unghi de 140+? In rest, nimic de comentat. Ce sa mai, Philips adevarat!

Si in final ceva poze cu el, sa vedeti si alte imagini, nu doar cele oficiale. Si btw, nu l-am luat de la emag, ci de la Intend din Cluj-Napoca, cu 50 de lei mai scump, asta acum o luna.

Aici am inceput sa schitez cate ceva despre importanta unui brand original, si am mentionat cateva chestii de baza despre copyright.

Acum trec la imaginea vizuala si la elementul esential, sigla, logoul…cum vreti. Cum am spus, logo design se face de foarta multa vreme, exista un numar imens de logouri.
Din fericire, si imaginatia designerilor este infinita, asa ca an de an agentiile ne surprind cu noi concepte la vederea carora spunem “wow”.
Insa, aceleasi agentii vin cu idei pe care ai impresia ca le-ai vazut deja, poate chiar de mai multe ori. Nu sunt originale.

Hai sa vedem care e problema. Clientul vrea ceva. Daca vrea un logo gen mascota, cu accent pe detalii, e mai usor, apar prea multe elemente ce diferentiaza logoul respectiv de celelalte.
Dar daca vrea un simbol stilizat, ceva simplu si corporate, devine putin mai dificil. Pentru ca existe sanse mai mari ca cineva sa fi folosit deja acel simbol.
De aceea, este o etapa foarte importanta in logo design. Cercetarea. Bineinteles totul incepe de la brainstorming, analiza firmei si stabilirea targetului. Dar nu trebuie evitata partea de cercetare a “pietei”. Orice agentie care se respecta face un research, cauta posibile concepte similare. Pentru ca e urat sa lansezi un nou logo si ziua urmatoare sa citesti in ziare ca l-ai furat. Un exemplu recent, binecunoscut, vechiul logo Quark. Ce a fost acolo nu se stie 100%, ideea e ca a iesit scandal, urmat de un nou rebranding.

Un logo se naste prin munca. Ca designer am lucrat deja la proiecte ce includeau si designul siglei.
De obicei spun ca in 3-4 zile vin cu 4-5 propuneri, clientul alege conceptul care ii place mai mult, si pe acela il finalizez (modificari, retusuri). Am dat peste unii care imi reprosau ca ce mare scofala sa tragi niste linii si sa bagi un text, hai ca-l poti face in 24 de ore. Bineinteles, am acceptat dupa ce i-am explicat ca astfel renunta la partea de “cugetare”. Ce idee imi vine pe moment, cu aia ramane. S-a ales cu ceva original? Sper, dar n-am avut sansa sa verific.

Nu neglijati chinurile facerii. Eu pana ajung la o varianta care imi place schitez alte 20. Una e prea ingusta, alta arata ca un porc, cealalta zici ca-i un rahat…intelegeti voi. Si asa ajung la o varianta care mi se pare buna. Alaturi de ea prezint alte 3 variatii explicand cum s-a ajuns la acest concept si de ce o varianta e mai buna ca cealalta. Pe scurt, spun povestea conceptului de la prima idee la varianta prezentata. Si asta pentru vreo 4-5 propuneri pe proiect. Si le verific, daca am in logo o floare, caut logouri cu flori, sa vad daca nu cumva este ceva exact la fel. In primul rand studiez concurenta, sa am ceva total diferit de ei. Cat de profund e studiul, depinde de cat a platit clientul.
In fine, acum stiti de ce nu merge in 24 de ore.
Si uite asa se nasc logouri originale, ce au o pveste in spate. Logouri care spun ceva.
Am facut si logouri la gramada(accentuez, nu am sacrificat calitatea siglei, ci timpul alocat), nici nu garantez pentru ele.
Depinde de client, unul serios este dispus sa plateasca pentru o lucrare de calitate.

E criza, stiti? Si cand e criza se fac restructurari de buget si personal, stiti? Normal ca stiti. Cei care au avut firme mici, le-au desfiintat si au trecut la PFA. Firmele care rezista isi indeamna angajatii sa devina PFA si sa lucreze prin contract de colaborare. Si uite asa marketingul personal a devenit din ce in ce mai important. Trimiteti cv-uri, va zbateti sa va faceti relatii, poate-poate s-or nimeri careva sa aiba nevoie de voi. Pentru tot demersul asta aveti nevoie de o carte de vizita, un “business card”. Asa ca am facut pentru voi cateva sabloane, numa bune de downloadat, editat si tiparit.

Sunt print-ready, 300 dpi, CMYK, format vectorial editabil (.ai-Adobe Illustrator). Daca nu aveti programul, nu-i nimic, lasati un e-mail cu datele voastre, le modific si le trimit pe mail. Dureaza 5 minute.

DOWNLOAD

DOWNLOAD

DOWNLOAD

In articolul asta am inceput sa dau sfaturi, sper eu, folositoare. Dar n-am terminat, asa ca reiau monologul.

Bun, deja stii cum sa te prezinti. Acum urmeaza partea interesata, munca.
Si munca nu consta doar in fac ce vrea clientul. Sincer, de cele mai multe ori clientul habar nu are ce vrea in afara de “I want it to look good, professional”.
Sunt 3 reguli de baza: comunicare, comunicare, comunicare. Stiu ca acest lucru e precizat chiar si pe siteuri, si in orice ghid despre freelancing, dar multi n-o respecta in adevaratul sens al cuvantului.
Comunicare nu inseamna, “sure I’ll do that, just wait a minute”, sau “yes, of course, in only 1 day”, ci comunicare adevarata.
Aici ce e bine de retinut:
a.)Cel putin un update pe zi. Adica la fiecare 24 de ore. Chiar daca nu ai progresat mult, semnezi condica, sa stie omul ca te ocupi de proiectul lui.
b.)Daca ai probleme, spune, nu incerca sa te ascunzi si sa faci pe strutul (nu te vad, nu ma vezi). A picat netul ca vecinul a taiat cablul si cei de la RDS/UPC/Romtelecom o dau pe aia cu “trimitem o echipa imediat”? Fuga la vecinu cu internet de la vodafone si anunti clientul. Sigur va intelege si va prelungi termenul, sau daca e treaba urgenta va veti intelege amiabil si isi va cauta alt provider fara hard feelings. Orice ar fi, spune-i, nu-l minti. Daca a intervenit ceva si trebuie sa pleci, n-o da pe aia cu a picat serverul, ca nu va crede ca pentru asta trebuie sa amani proiectul cu 2 saptamani. Fii sincer!
c.)Feedback. Nu lucra ca orbul. Nu-i prezenta dintr-odata produsul final. Daca nu-i place, ce faci, o iei de la inceput si faci doua produse la pret de unul? Ai ales sablonul de culori si ai facut schita layoutului? Arata-i inainte sa incepi detaliile. Ai ales cateva fotografii de pe iStockphoto pentru banner? Intai da un preview asa cu watermark, sa nu te trezesti ca nu-i place si sa fi dat banii degeaba. DAR, nici nu exagera. Nu trebuie sa-l stresezi pentru fiecare chichita. Sunt destui carora nu le place sa te tina de mana cat lucrezi.
d.)Fii diplomat! Nu uita ca esti in fata monitorului si nu te doare sa tastezi ca “Sure, since I offered 3 revision rounds, I can tweak it so you can be 100% satisfied” in timp ce bombani despre rude si morti si metode de tortura. Clientul va aprecia ca ai avut rabdare cu el si te va rasplati pe masura.
e.)Nu fi sclav. Poate fi si regula nr. 1 in ziua de astazi. Si aici nu ma refer sa faci Youtube pe $5. Daca e rentabil, go for it, si da-mi si mie adresa de mail sa te angajez, iti dau dublu.
Multi vor incerca sa profite de tine, nu le oferi acest deliciu. Am mai spus-o, delimiteaza CLAR, FOARTE CLAR ce esti dispus sa faci. Nu lasa portite deschise. Eu mi-am luat-o recent cu “unlimited revisions”. Dupa 5 revizii deja se contura un logo pentru un alt produs. Cand mi s-a cerut ca “last revision” sa schimb numele din XYZ finance in ABC IT-shop am refuzat, am apelat la stafful siteului si surpriza, am pierdut. Da, era Arbitration pe RAC, si clientul si-a argumentat cererea spunand ca intre timp si-a schimbat domeniul de activitate si ca ce ma doare pe mine sa mai schimb un text. Eu, naivul.
f.)ESCROW. Fara escrow, nu misti un deget. Daca ceri escrow si ti se refuza, fugi! Daca nu vrea escrow pe motiv ca n-are incredere in tine, fugi! Escrow e solutia sigura pentru amandoi, si un client serios stie asta. Daca e proiect mai complex, poti si fara, cu plata pe etape, sau eventual sa transferi fisierele sursa doar dupa ce esti platit. In fine, asta deja tine de increderea acordata clientului, etc. Dar escrow e perfect. Mai multe despre cum sa eviti tepele, poti citi aici, nu voi dezvolta acest aspect.

In general cam astea ar fi reguli de bun simt, daca-mi mai vine ceva in minte, adaug. In rest, un singur cuvant: profesionalism. Atat.

Avand in vedere ca daca scrii “free wallpapers” in google 70% din siteuri sunt porcarii, unde trebuie sa te inregistrezi, sa platesti, si chestii, am decis sa public o colectie de wallpapere care mi se par reusite, si important, publicate recent, asa ca  e putin probabil sa fie peste tot. Eu le-am cules de pe deviantart.

Nu sunt facute de mine, nu am absolut niciun merit, eventual pentru selectie. Ii admir foarte mult pe acesti artisti care au timp sa mai faca ceva si asa de distractie.

1. Whisper of Wind

2. Apotheosis

3. Untitled 009

4. Nothing Else Matters

5. Balooning

6. Fireworks

Cand mai gasesc ceva nou si bun, editez si adaug.