8 Idei, tehnici și trucuri pentru Toolkit-ul Web Design

La fel de important ca și designul de interfață și de interfață, este sentimentul mulțumit de a proiecta ceva care, pur și simplu, arată minunat că ne ține pasul în acele momente în care binele creativ este uscat, când te-ai uitat la o pânză neagră timp de ore, ați salvat o sută de încercări.psd, și când ați fost hrăniți de design. Este pentru că știi că atunci când ai o lucrare finalizată, lustruită și adevărată, pe ecran, și ai trecut Photoshop în modul ecran complet și te uiți la ea din diferite unghiuri în jurul camerei și tu ești basking în gloria pixelilor perfect poziționați, știți doar că aceasta este cea mai mare profesie din lume!

Această postare este Ziua 5 a Sesiunii noastre de Web Design. Sesiuni de creație "Ziua sesiunii 4-a sesiune"

1 - Nu fi satisfăcut cu 1 iterar

Când proiectați un site web pentru un client, trebuie să furnizați adesea câteva concepte de design diferite. Când simțiți că ați reușit prima dată, este destul de enervant să trebuiască să dredgeți o altă versiune pe care sunteți sigur că nu o va face din Photoshop. Dar, de-a lungul timpului, am realizat că este de fapt o idee bună să faceți mai mult de o versiune, indiferent cât de fericit sunteți cu primul.

Fie că este vorba de mai multe iterații ale aceluiași design, fie de mai multe modele, în general, mai mult timp pare să aibă un rezultat mai bun. Asta nu înseamnă că ar trebui să adaugi la un design, de fapt este deseori mai bine să renunți la lucruri. Dacă faceți mai multe concepte de design, puteți uneori să îmbinați cu succes cele mai bune elemente ale unui design în altul.


Tehnică: Snapshot-uri PSD


Snapshot-urile sunt o modalitate simplă de a experimenta un design fără a pierde nimic sau a face bazilioane de copii

Photoshop are o caracteristică interesantă care vă permite să faceți instantanee ale unui punct din istoria documentului dvs. Odată ce creați un instantaneu, puteți să vă întoarceți înainte și înapoi între diferite instantanee, precum și primul punct de istorie și cei mai recenți 20 de pași. Ce inseamna ca poti sa iei in continuare instantanee si apoi sa incerci noi linii de gandire pentru a vedea unde te iau. Insa, BEWARE, snapshot-urile nu sunt salvate atunci cand salvezi un fisier, asa ca trebuie sa treci individual si sa salvezi fiecare instantaneu la sfarsitul zilei.

Iată cum faceți un instantaneu:

  1. Deschideți un fișier PSD la care lucrați
  2. Faceți câteva schimbări
  3. Deschideți paleta Istoric (Fereastră> Istorie)
  4. În partea de jos a Paletei de Istorie faceți clic pe pictograma camerei minuscule
  5. Și acum ar trebui să aveți un instantaneu! Puteți trece acum între instantaneu și primul ecran istoric

2 - Aflați o Bibliotecă de stiluri pentru a desena


Există atât de multe stiluri minunate și se uită în jur, galeriile precum Creattica sunt o modalitate minunată de a le vedea

Așa cum am menționat anterior, niciodată nu este o idee bună să treci doar pe bandwagon de cele mai recente tendințe și să folosești anumite stiluri orbește. Cu toate acestea, este bine să utilizați un anumit stil atunci când este necesar. Deci, dacă proiectați un site care merită un aspect frumos, curat, web 2.0, atunci nu înseamnă că trebuie să evitați să faceți acest lucru, doar pentru că acest lucru se întâmplă să fie la modă la acea dată. În mod similar, dacă proiectați un site care merită un design frumos, distrus, atunci dacă pantoful se potrivește, purtați-l!

Deci, având în vedere acest lucru, vă ajută să aveți o bibliotecă de stiluri care să se poată descurca. Când desenați o martor atunci când începeți un nou proiect, poate fi uneori bun doar să vă întoarceți la o alegere stilistică predefinită și apoi lăsați-o să vă ghideze. În mod inevitabil, veți termina cu ceva total diferit de tot ceea ce ați proiectat înainte și cel puțin vă va ajuta să începeți.

Dar fiți foarte precauți să folosiți stilul greșit doar pentru că arată foarte bine și nu pentru că este potrivit pentru client / mesaj / conținut. Singurul antidot de a face acest lucru este de a cunoaște și de a avea o mulțime de stiluri de design diferite. Cum învățați stilurile de design? Ei bine, puteți începe prin observarea și imitarea acestora. Îmi place să navighez prin galerii de design web minunat și să absoarbe idei vizuale, văzând ce tipuri de fonturi funcționează cu ce tip de aspect și, în general, învățând tehnicile altor oameni. Când vine vremea să-mi creez propriile desene sau modele, acea informație este în capul meu undeva, dar când vine vorba, are o întorsătură unică a proiectului pe care lucrez, precum și propriile mele idei creative.


3 - Arunca obiecte în jurul pentru a căuta Accidenturi fericite


Când am proiectat RockablePress, am desenat doar dreptunghiuri aleatorii și am decis că bara laterală arăta destul de bine, fiind puțin cam echilibrată, a fost un accident fericit.

Unele dintre cele mai bune modele pe care am lucrat vreodată au fost rezultatul a ceea ce un coleg al meu a numit odată "accidente fericite". Știți când opriți un strat sau lipiți accidental ilustrația greșită sau deplasați cursorul Hue prea departe și dintr-o dată vă uitați la ecran și credeți că "OMG este un design de aur!"

Cred ca toti dorim ca noi sa putem produce idei de design uimitoare, dar sa ne confruntam cu asta, uneori sa mergeti la rezervor si sa alergati in gol. Accidentele fericite vor începe de multe ori gândul tău creativ, așa că este logic să nu fugi doar cu ei atunci când se întâmplă, ci să-i încurajezi prin a te mânca. Uneori mișc forme doar în mod arbitrar, încerc diferite culori sau fac alte lucruri "aleatoare" pentru a vedea dacă pot intra în ceva despre care nu m-am gândit niciodată.


4 - Creați o temă în jurul unui element vizual


TabCorp de DTDesign ia asteriscuri la un nivel complet nou

Ceva pe care mi se pare că funcționează bine, mai ales pe site-urile cu un design vizual inerent (site-urile corporative) este de a face o piesă pe un element vizual. De exemplu, ați putea utiliza linii punctate în designul dvs., atunci ați putea oglinda acea temă în meniul dvs., în separatoare orizontale, în colaje foto, diagrame, sub formă de gloanțe și așa mai departe. Există tone de elemente vizuale diferite pe care le puteți ridica și utiliza ca temă, exemplele includ forme, tipuri de colț cum ar fi curbe sau diagonale, modele, caractere de text ca paranteze și așa mai departe.

Desigur, trebuie să găsiți un echilibru între o oglindire subtilă și trecerea peste partea de sus, dar este o tehnică utilă de a lega un site într-o temă consecventă - mai ales după cum vă spun dacă nu aveți altceva de lucrat cu!


5 - Curățați fiecare pixel


Ai grijă de pixeli și vor avea grijă de tine. Verificați articolul meu despre lustruirea unui design web

Mi-ar placea mai degraba sa spun ca design-ul web se refera la pixeli. Vizitatorii site-urilor web pe care le proiectați vă vor uita la munca dvs. apropiată și personală, adesea cu ochi obosiți și degete ale mouse-ului mâncărime. Este important să aveți grijă de fiecare pixel de pe pagină și neatintați și ascuțiți și ordonați, astfel încât designul dvs. să fie clar și clar.

Aceasta înseamnă că textul dvs. este bine distanțat atât între litere, cât și între linii, marginile dvs. sunt ascuțite și pixelul perfect, graficele sunt ascuțite (dar nu merge prea departe și nu depășesc!) Și că folosiți tehnici cum ar fi 1px conturând pentru a face totul să sară de pe pagină.

Un pic mai mult de un an în urmă am scris un tutorial aici pe Psdtuts + numit despre lustruire un design site-ul care are o mulțime de informații despre ascuțire și curățare un design site-ul.


6 - Folosiți structura!


Site-ul frumos proiectat de Wilson Miner se bazează pe o structură care să arate minunat!

Pentru că m-am învățat în designul web, există câteva principii de proiectare cu adevărat de bază, pe care mi-am pierdut-o de la începutul învățării. La câțiva ani după ce am început să fac site-uri web, m-am alăturat unei asociații locale de design și am întâlnit un tip pe nume Matt Leach, care a devenit editor al revistei Empty underground. Oricum, Matt mi-a făcut două lucruri pentru care sunt recunoscătoare veșnic. Primul este că mi-a prezentat minunata mea soție Cyan (yay!) Și al doilea marginal mai puțin important este că ma învățat să folosesc structura în designul meu.

În acel moment am folosit doar pentru a arunca lucrurile pe o pagină și uneori lucrurile aliniate sau au fost uniform distanțate sau folosite într-un fel de rețea, și, uneori, ei bine doar sorta a căzut cum au căzut. Matt a criticat un proiect pe care l-am făcut și mi-a arătat minunile de aliniere și spațiere și nu m-am uitat niciodată.

Dacă nu faceți deja acest lucru, petreceți ceva timp făcând aceste lucruri:

  1. Și lucruri spațioase
    De exemplu, dacă aveți un text într-o cutie din bara laterală, este de obicei o idee bună ca textul să fie echidistant de sus și de partea laterală. Este un obicei simplu, dar face caseta să pară echilibrată și uniformă.
  2. Liniați lucrurile
    Dacă aveți o grămadă de cutii, un logo, unele titluri, un text, toate în aceeași poziție, ar trebui să vă aliniați marginile cât mai mult posibil. Există câteva trucuri pentru că unele litere în titluri nu ar trebui să fie exact aliniate - cel mai bun exemplu este un capital "T", sau dacă aveți text într-o cutie aveți posibilitatea de a alege între garnitură până la marginea cutiei sau marginea textului cu celelalte elemente. Cu cât practicați mai mult alinierea și cu cât priviți mai mult la ceea ce fac ceilalți oameni și desene sau modele, cu atât veți obține mai bine până când va deveni instinctiv și veți descoperi că începe să vă înnebunească atunci când oamenii nu aliniază lucrurile cum trebuie: -)
  3. Utilizați grilele
    Grilele sunt o extensie a lucrurilor de garnitură. Aici predefiniți un set de spații verticale și orizontale și apoi le lipiți (cu variație). Trebuie sa faceti acest lucru prin trasarea unor ghidaje si linii de coloane - nu chiar personal, o fac cel mai mult doar ghicind si "facandu-mi sa arate bine". Dar, cu siguranță, cu cât este mai complexă grila și utilizarea acesteia, cu atât mai mult veți putea folosi ghiduri și ajutoare.
  4. Fii sistematic în dimensiunile fontului și în familii
    O greșeală de debutant este să înnebunești cu amprentele și dimensiunile nepotrivite, fonturile și culorile. În timp ce variația este bună, doriți și consecvență. Este mai bine dacă aveți 1-3 caractere pe care le folosiți și o faceți în mod absolut consecvent.

7 - Acum se amestecă în unele nestructurate


Jay Hafling are un site care este de fapt foarte structurat, dar se simte nestructurat datorită unor elemente de design bine plasate.

Odată ce ai structură în proiectare și te-ai obișnuit să aliniezi și să fii ordonată și sistematică, numai atunci este timpul să izbucnim și să începem să amestecăm lucrurile. Este vechea părere că trebuie să înțelegeți regulile înainte de a le rupe.

Amestecarea unor elemente nestructurate într-un design structurat este o modalitate foarte bună de a obține un rezultat care pare ordonat și ușor de înțeles și totuși nu este plictisitor. Scopul dvs. principal este de a ieși din structură folosind câteva elemente vizuale îndrăznețe, pentru a modifica distanțele, tipurile de fonturi și utilizarea grila dvs. și totuși să aveți o structură de bază.

De fapt, puteți chiar să vă despărțiți complet de structură, dar este destul de greu să faceți bine. Un designer renumit care este cunoscut pentru regulile de rupere - în mare parte legat de tipografie, dar și cu rețele și structuri de design - este David Carson.

SmashingMagazine are o grămadă de articole despre design-ul bazat pe grilă, inclusiv despre ruperea rețelei de către editorul nostru Psdtuts + Sean Hodge.


8 - Cu fiecare proiect, faceți un lucru pe care nu l-ați făcut niciodată înainte


Cand am creat Daily Creattica am decis sa incerc sa amestec formularul de comentariu un pic, a fost un rezultat destul de rece si de atunci am folosit acel layout pe alte trei teme.

Dacă aș putea da un sfat unui nou designer, ar fi să-l faci un obicei personal de design: cu fiecare proiect pe care îl faci, fa un lucru pe care nu l-ai făcut niciodată înainte. Fie că este vorba de un font nou, o nouă rețea, un nou stil vizual, o nouă schemă de culori, un nou efect grafic, o nouă structură de meniu, o nouă tehnologie, orice. Chiar daca inseamna ca slujba dureaza un pic mai mult decat ar fi trebuit, chiar daca ar duce la cateva sfarsituri pe care le-ai fi putut evita, chiar daca inseamna ca trebuie sa petreci un pic mai mult pentru a cumpara un nou font, fa-o.

Acest obicei va face o serie de lucruri pentru tine. Vă va forța să vă extindeți în mod constant orizonturile ca designer. Vă va menține munca proaspătă. Și vă va împiedica să cădeți într-o rutină de proiectare și pur și simplu pompând "obișnuitul". Este un obicei pe care îl puteți lua mai devreme în cariera dvs. ca o modalitate de a deveni mai bun și, după mult timp după ce vă stabiliți, va continua să plătească dividende.

Dacă luați doar un lucru departe de toate aceste postări Web Design Week am lucrat atât de mult, fă-o așa: să vă împingeți în mod obișnuit ca un designer, să încercați lucruri noi, să experimentați, să fiți mereu învățați și să nu încetați să găsiți bucurie în noi tehnici, stiluri și idei.

Această postare este Ziua 5 a Sesiunii noastre de Web Design. Sesiuni de creație "Ziua sesiunii 4-a sesiune"