Posturi cu tag-ul ‘design’

Exemplu imagine JPEG / JPGPronuntat: “weppy”. /(wep’e)/ , Google incearca sa impinga in fata acest nou format, declarand ca poate reduce cu pana la 40 de procente dimensiunea unui format de imagine fotografica comparativ cu traditionalul JPEG / JPG.

In web design mai avem cativa ani pana vom adopta acest tip de imagine ca standard. Chiar daca avem conexiuni mai rapide la Internet intradevar, tot simtim nevoia unui format de imagine mai eficienta.

Google propune un format de imagine cu pierderi de tipul JPEG / JPG care se comporta in acelasi fel ca si JPEG-ul: (descreste calitatea pentru a avea o imagine cu dimensiuni mai mici) dimensiuni semnificativ mai mici in bytes decat echivalentul actual: JPEG.

Pro
- formatul de imagine promite dimensiuni ale fotografiilor in medie cu 40% mai mici decat clasicul JPEG, reduce astfel timpul de incarcare al unui website (inchipuiti-va ca la ora actuala, un magazin online sau un site de arta sau fotografie au prima pagina de dimensiuni de 1 MB sau sau mai mult)
- reduce traficul si implicit costurile legate de web hosting
- format cu pierderi, se poate descreste calitatea imaginii in favoarea descresterii dimensiunii fisierului, foarte util in optimizare in web design

Exemplu imagine WebP salvat ca PNGContra

Fiind tehnologie foarte noua, nu va exista premisa dezvoltarii site-urilor doar cu imagini de tipul WebP din mai multe puncte de vedere:
- producatorii de software de prelucrare si constructie de imagini (Adobe Photoshop, Corel Draw, etc) nu se vor ‘grabi’ sa lanseze versiuni noi special pentru a suporta acest gen de imagini, acest lucru fiind un impediment major in web design.
- in materie de web browsere, pana in prezent, doar Google Chrome a anuntat ca va sprijinii acest timp de imagine, celelalte browsere: Mozilla Firefox si Internet Explorer nu au lansat nicio declaratie in acest scop.

In imaginile din articol: prima imagine este codata JPEG (dimensiunea: 936605 bytes), a doua imagine este codata WebP dar salvata pentru a putea fi arata pe web in format PNG (fara pierdere) (581514 bytes (cu 37.91% mai putin))

Mai multe detalii pe sectiunea de web design


10
Sep '10

Webdesign websitePlanificarea este importanta.

Ok, decizia a fost luata: “Gata, de data asta imi fac website” sau “Nu mai suport vechiul website, nu se mai potriveste cu cerintele mele“. Fie ca acum te pregatesti sa iti faci primul site, fie ca iti faci altul nou, trebuie sa faci pasii corecti de la bun inceput.

Inceputul inseamna planificare. Despre asta am sa vorbesc, despre structura website-ului. Multa lume confunda planificarea cu designul. Sigur, si desig-ul ca parte a webdesignului este important, insa daca ai de gand sa faci un website frumos, pe langa estetica trebuie sa faci si o structura adecvata: sa fie “user-friendly” (sau cum se zice acum: un site trebuie sa aiba “usability“). Usability: usor de folosit, usor de invatat, usor de retinut si util utilizatorilor. (Sper sa am ocazia sa scriu un articol si despre asta).

Cum am scris mai sus structura unui site trebuie sa tina cont ca un site trebuie sa aiba un design atractiv, sa aiba “usability” si sa mai adaug eu… sa poata sa fie usor de indexat de catre motoarele de cautare. Atunci cand vorbesti cu un webdesigner el te intreaba (in mod constient sau nu) “Ce butoane vrei?“. (As vrea sa fac o mentiune: ma rezum la o structura simpla, pentru ca altfel articolul ar fi unul extrem de lung.)

Daca este vorba de un website de prezentare al unei companii ne trec prin gand urmatoarele categorii: Prima pagina, Despre noi, Servicii si Contact. Da – este un inceput de structura. Insa structura aceasta este satisfacatoare? In primul rand eu as propune un pic sa ne gandim si la motorul de cautare, adica sa reusim sa ii “servim” inca de pe prima pagina ceea ce e important: insirarea serviciilor prin linkuri (ancore). De pe urma serviciilor la urma urmei luam clienti, asa ca merita mentionate pe prima pagina ca sa fie mai usor de indexat.

Structura se altereaza un pic: Prima pagina, Despre noi, Contact iar apoi insirate serviciile (cu link fiecare) – daca sunt suficiente servicii putem sa facem un meniu special cu acestea, daca nu le includem in acelasi meniu cu butoanele clasice. Daca ar fi Blue Engineering o structura simpla la Servicii ar fi: Webdesing, Publicitate online, Service calculatoare si Hosting.


Acum sa vedem ce includem in fiecare pagina:

Prima pagina, home page, pagina de start
– una dintre cele mai importante pagini din site. Fie ca ajung de pe alte pagini ce au fost indexate sau recomandate, majoritatea utilizatorilor aleg sa o vizualizeze. Deci atentie ce informatii punem in ea. Eu as include un pic din “Despre noi” (Da, utilizatorul vrea sa stie un pic despre compania care detine site-ul pe care il viziteaza), un pic din ce fac (serviciile), un pic din ce am facut “Portofoliu” si poate si un pic din ce “Produse” vand (daca nu ma rezum doar la prestarea de servicii).

Iar se complica un pic structura: Prima pagina, Despre noi, [Portofoliu], [Produse], Contact si Serviciile detaliate.


Despre noi
, o pagina care sincer sa spun nici eu nu sunt prea sigur ce trebuie sa contina. Insa un lucru stiu sigur: ca sa cumpere lumea de la tine ceva trebuie sa stie ca esti de incredere. Asta trebuie sa transmiti in “Despre noi” – ca esti de incredere.

Portofoliu
– ce ai facut, pentru cine ai facut. Sunt firme care aleg sa faca partea aceasta separat: “Portofoliu” si “Clienti”. Eu spun ca daca nu sunt prea multe lucruri de spus (firma este poate la inceput) le puteti combina, sa iasa mai mult continut. Nu te “lauzi” cu lucrul acesta atunci poate nu esti de incredere (vezi sectiunea “Despre noi”).

Produse
– toata lumea e experta aici :) Cateva lucruri care mie mi se par esentiale: utilizatorul, adica clientul care viziteaza website-ul vrea “sa vada“; asadar nu uitati de “poze“! Ce mai trebuie pus: un cod sau o denumire unica a produsului (sa nu se faca confuzie cu alte produse), iar daca nu ai un “shoping cart” (ce le urasc eu pe astea – sunt utile dar imi strica toata pofta cand vine partea sa imi fac cont etc) macar sa pui niste date de contact (telefon!) sau un formular de comanda. Ultimul lucru pe care il precizez aici: descrierea sa fie suficienta: nici prea lunga si nici prea scurta.

Contact
- aici as vrea sa faultez pe unii, dar nu vreau sa dau nume (ba da… o sa dau un indiciu, un domn foarte sus pus in Emag are blog si face un lucru enervant cand vine vorba de Contact). Ce fac unii: din cauza ca nu au ce sa scrie prea multe la “Contact” (decat un email) considera ca daca pun un singur link cu “mailto:office@domeniu.ro” rezolva treaba. Atunci cand dau click mi se deschide cine stie ce client obosit de email (Outlook Express, pe care nici nu il folosesc) sa ii scriu “IMEDIAT” celui pe care am avut proasta inspiratie sa ii accesez “Contactul“.  Normal ca dupa pasul acesta urmeaza sa inchid fereastra cu site-ul acesta facut la “meserie“.

Gata inchei ca va plictisesc. Dupa cum observam mai sus, structura este influentata, pe langa lucruri normale precum: domeniul de activitate si de lucruri precum indexarea motorului de cautare, nevoia utilizatorului de a avea totul usor de accesat: cine este compania, cu ce se ocupa, ce produse vinde.


15
Jul '09

The life of a designer is a life of fight. Fight against the ugliness. Just like a doctor fights against disease. For me, the visual disease is what i have around, and what i try to do is cure it somehow with design.

designBEI pentru mine inseamna trecerea de la hartie la monitor, de la CMYK la RGB, de la bleed la slice, de la print publishing la digital publishing, pe scurt de la print la web. Un pas important pentru mine. Tehnicile traditionale din print, in particular formatarea textului, nu se aplica si in Web deoarece CSS nu ofera instrumente sofisticate pentru a desena ideea unui layout de print. Nervi de otel in manusi de catifea, multa cafea, studiu principiilor, inspiratie, iar studiu, Photoshop, iar studiu, Photoshop, acrelile lui Kleampa (apropo sa imi dai 5 lei ca ti-am facut reclama) [a platit], au facut ca dupa 2 saptamani sa scap de blestemul Corel ( cel putin pentru print ).  Ma simt liber, ma simt din nou stapan pe monitor, ce gandesc pot reproduce si asta este pentru un designer poate cel mai mare atuu. Am inceput din nou sa iubesc ceea ce fac si sa o fac din placere. Uitasem acest sentiment. Acum am invatat ca un designer este un mestesugar care amesteca cunostintele cu ideile personale. In spatele unui layout, unei pagini de web, se ascund sentimentele si viziunea designerului. Si am mai invatat ca Photoshop este începutul şi sfârşitul vieţii unui designer.  Imi promit mie, pentru ca mie imi pot tine promisiunile,  ca am sa ma maturizez ca designer si candva poate  vei citi un articol  la Smashing Magazine despre designerul ala din tara aia obscura care are capitala la Budapesta Bucuresti parca si care lucreaza la firma aia mare BEI. Hmmm, oare sunt serios acum sau epatez? Astept critica Anei, un auditor destul de impartial [motiv subiectiv - nu ne cunoastem].

P.S. Despre atmosfera si o zi obisnuita la Bei intr-un post viitor.