Arhiva pentru tagul “Webdesign”

Ingrediente pentru designuri web

Poate vă aflaţi în situaţia mea, fără prea mare talent la design. Într-o vreme când începeam un sit trebuia să îi concep şi designul (niciodată nu am apelat la template-uri, dar evident m-am inspirat de ici de colo). De când folosesc WordPress am pe tavă mii de template-uri – dar şi aşa investesc în general 1-2 zile pentru a adapta designul dorinţelor mele şi pentru a-l individualiza, pentru a-l scoate puţin în evidenţă, pentru a-l "îndepărta" de originalul folosit. Vă povesteam anul trecut despre temele WordPress, dând exemplul sitului BRU.ro, unde între tema originală şi cea finală e o diferenţă destul de mare… zic eu. Mai schimbi o culoare, mai pui alte imagini şi tema poate arăta mult diferită. Măcar atâta demnitate după ce ai folosit un template (chiar şi legal) 🙂 .

img79

De mare, mare, mare …


CSS: Artă şi ştiinţă (carte gratuită!)

Vă amintiţi de oferta SitePoint din primăvar? Era atunci oferită o carte despre Photoshop. Oferta de toamnă include acum o carte despre CSS. Oferta a început de două zile şi ţine două săptămâni. Ca să descărcaţi respectiva carte evident trebuie să faceţi ceva: să vă daţi adresa de email sau să scrieţi via Twitter despre ea. Nu e prea frumos, ştiu, dar pentru cei grăbiţi (sau care nu vor să îşi dea emailul nici nu folosesc Twitter), iată că pe diverse situri au apărut linkuri directe, precum acesta (sau aici dacă sunt probleme de viteză). Dacă expiră oferta sau doriţi cartea tipărită, ea apare pe Amazon la 26 de dolari. Am răsfoit cartea (PDF-ul adică) şi nu e vorba de un ghid introductiv, sistematic, ci de analizarea unor cazuri: 1. Headings; 2. Images; 3. Backgrounds; …


Fetiţa Pixel ne prezintă

Numele siturilor nu se traduce! Ştiu. Dar m-a amuzat. PixelGirlPresents.com este un sit care probabil din lipsă de forţe de muncă e îngropat de ceva vreme, dar conţinutul lui nu şi-a pierdut valoarea. Mie de exemplu mi-a fost foarte util când am avut nevoie de nişte seturi de iconiţe care să nu fie totuşi de 16×16 sau 32×32 pixeli ci mai mari. Şi am găsit nişte seturi foarte-foarte creative, şi de 256×256 pixeli. La ce mi-au trebuit? Poate vă amintiţi că săptămâna trecută am scris un joc de memorie cu jQuery. M-am gândit că nu merită să fie îngropat aici (unde probabil interesează din perspectivă tehnică) aşa că l-am adaptat puţin pe situl ProFamilia.ro, şi a ieşit o secţiune de jocuri memo (vă invit să o vizitaţi) care se va actualiza periodic cu câte un alt set de imagini (de fapt …


S/2: jQuery, Tooltips, Template-uri

→E joi, e ziua dedicată webmasterilor, aşa că merge să privim puţin înapoi să vedem nişte listuţe utile apărute pe web în ultimele zile sau săptămâni. Şi voi începe cu un articol recent cu un titlu foarte pretenţios: 20 jQuery Plugins for Unforgettable User Experience. Despre devSnippets am mai scris şi era normal să apară liste cu selecţii de scripturi. Şi ce era mai predictibil decât jQuery? Unele dintre scripturi sunt arhi-cunoscute de cei pasionaţi de jQuery, dar există şansa să găsiţi şi scripturi noi. Pe mine de exemplu m-a atras scriptul de auto-populare a unor câmpuri listă, pentru că am avut nevoie de aşa ceva în câteva proiecte. Vizual m-a încântat cel mai mult pluginul CrossSlide. Merită să vedeţi pagina pluginului care include o demonstraţie: efectele sunt a la Flash, dar realizate cu JavaScript. Autorii recunosc că scriptul ar putea solicita intens procesorul, …


TopStyle Lite… încă bun

Dacă aveţi un sit, mai ales un CMS, atunci sigur că folosiţi CSS chiar şi fără să ştiţi. Ne adresăm în continuare celor cu cunoştinţe de CSS aproape zero pentru a introduce un program veeechi, dar încă bun. TopStyle are două versiuni: una lite, adică uşoară, redusă ca funcţionalităţi, şi una pro, adică profesionistă, dar şi comercială. Versiunea gratuită o puteţi descărca de aici şi ea vă poate fi de mare ajutor dacă sunteţi la început de drum cu foile de stil (style sheets). De ce? Este un editor orientat pe CSS, chiar dacă învechit, după cum veţi vedea de la primele apăsări de taste. Să presupunem că dorim să "stilăm" pagina în întregime: body. Din capturile de mai jos vedeţi că programul oferă funcţia de auto-completare atât pentru proprietăţi cât şi pentru valorile lor (acolo unde există valori estimabile).


Smush.it: optimizarea imaginilor

Nu m-am lămurit ce înseamnă smush, dar poate nu am căutat eu bine. Oricum, să reţinem SmushIt.com (mie îmi sună a… smucit), un sit foarte bun pasionaţilor de optimizări cât cuprinde. Ce face acest sit? Optimizează imaginile. Sunt sigur că nu mulţi webmasteri sunt foarte atenţi să îşi optimizeze imaginile. De ce am face-o totuşi? Sunt mai multe motive: imagini mai mici (fără afectarea calităţii) înseamnă încărcare mai rapidă a paginii, lucru pe care nu îl vor simţi cei cu conexiuni maaari, dar va fi bine venit pentru cei care încă – vai loc – mai navighează via dial-up. Dar mai există un argument ce merită luat în seamă de siturile cu mulţi, foarte mulţi vizitatori: lăţimea de bandă consumată. E o problemă de matematică, dar în cele din urmă 10KB câştigaţi pe imaginile ce formează designul unui sit pot însemna sute de MB economisiţi lunar ca …


Cum să îţi faci o temă WP?

Nu am avut până acum ocazia să fac o temă WordPress de la zero. Mi-ar plăcea, dar cere ceva timp. Dacă Dvs sunteţi gata să faceţi pasul atunci am câteva recomandări. În română nu ştiu să fie prea multe resurse (decât un vechi material în două părţi), dar în limba engleză sunt muuulte. O listă de situri ce tratează această temă găsiţi în WordPress Developer’s Toolbox (recomandarea de săptămâna trecută), la secţiunea 2.1, numită Basics of Creating a Theme (cea mai completă resursă pare a fi oferită de asiaticul cu ochii liniuţă). Dar printre respectivele referinţe nu am sesizat să fie şi tutorialul de pe ThemeTation.com, pe care îl găsesc complex, bine documentat, incluzând şi etapa Photoshop. În plus articolul e relativ recent (jumătatea lui iulie 2008).

img31

Iată …


Aproape 100 de fundaluri la 300dpi

DragonArtz a publicat acum câteva zile 94 de fundaluri (backgrounds) la 300dpi, în format PNG, dimensiune 4167×4167 pixeli. Personal nuanţele alese nu mi se par cel mai adesea inspirat combinate, dar între zecile de imagini ceva-ceva tot găseşti. La dimensiunea şi rezoluţia la care sunt disponibile, fundalurile pot fi utile atât celor care lucrează pe web (pentru webdesign) cât şi celor care lucrează în domeniul tipăriturilor. Evident, după nevoie îţi poţi decupa o parte din imagine, pentru un header de sit sau altceva. Toate imaginile fac împreună peste 60MB, puşi spre descărcare de pe DepositFiles şi RapidShare – drept urmare viteza de descărcare s-ar putea să nu fie cea mai teribilă, în funcţie şi de momentul din zi.

img17

O altă posibilă utilizare ar putea fi pentru a crea nişte wallpapere abstracte. Vedeţi mai jos un test în …


Inspiraţii pentru design

Am mai spus-o: nu e nimic ruşinos să te inspiri. Problemele apar când copiezi fără prea multă inventivitate şi nici nu recunoşti sursele folosite. Astăzi vă propun ca sursă de inspiraţie pentru design o resursă mai puţin obişnuită: un cont Flickr. Gustavo Pimenta îşi foloseşte în mare parte contul Flickr pentru a strânge capturi cu elemente de design care i-au atras atenţia. Fie că sunt pagini întregi sau doar părţi, Gustavo le-a strâns şi grupat în această colecţie. Am să citez câteva subseturi pentru a vă face o idee: pagini 404, autocompletări, pagini Despre, butoane, calendare, pagini În curând, formulare, forumuri, portofolii, designuri pe albastru, designuri pe verde, pagini de Întrebări frecvente, tabele, stiluri de paginare. Eu mai jos m-am folosit de facilitatea de slideshow pentru a include selecţia sa la capitolul taburi în design. În total Gustavo are sute de capturi… reţineţi pe viitor când doriţi să …


Iconiţe peste iconiţe

Se pare că ultima semnalare de iconiţe a fost în 6 iulie a.c. aşa că e timpul să îmi revăd tot ceea ce mi-am salvat după acea dată. Voi începe cu Function Icon Set, ce conţine 128 de iconiţe la 48×48 pixeli. Al doilea set – captura de mai jos, dreapta – vine de la Pinvoke.com. Actualmente se găsesc două seturi: Fugue şi Diagona, unul cu 971 de iconiţe, celălalt cu 400. Sunt multe dar mici (16×16) şi multe variaţii. Sunt bune pentru webaplicaţii care au meniuri complexe sau care afişează directoare.

image  image

 

Trecem acum la un sit DryIcons – el a fost amintit de Jurgen într-un comentariu, dar acum îl includem în acest articol cu precizarea că …