Proiectarea ucigașelor ucigase UI cu Freebies - Ultimate Guide

Domeniul de web design a luat o respirație proprie în doar câțiva ani scurt. Există mai mulți designeri activi pe plan mondial acum decât oricând, toți colaborând pe idei de proiecte inovatoare. Iar conceptele din spatele multor astfel de tendințe au fost dezvoltate prin designeri graficieni profesioniști.

Este posibil să dureze luni sau chiar ani înainte de a înțelege pe deplin tehnicile de a construi o interfață cu utilizatorul. Trebuie să luați în considerare dimensiunile și amplasarea elementelor de pagină, precum și lizibilitatea textului și a etichetelor. Cu un pic de timp liber, puteți să vă asamblați într-o abordare minimalistă pentru a construi site-uri web cu mai puțină și mai puțin confuzie. Și chiar și atunci, există zeci de alte tehnici de design care să fie luate în considerare.

Pentru acest ghid am asociat unii tehnici moderne de proiectare a interfeței utilizator cu freebies puteți descărca și să se joace cu. Sper că aceasta va oferi o motivație celor interesați de o carieră în construirea graficii / designului web. Chiar și designerii web profesioniști pot găsi câteva dintre aceste tendințe utile pentru următorul proiect.

Practicați cu șabloane complete

Când aveți abilitățile de a proiecta aspectul dvs. de la zero, nu este nevoie să începeți cu șabloanele. Începătorii, pe de altă parte, se pot simți mai confortabil pornind de la un design complet și de a lucra în detaliile mai fine.

Există câteva descărcări gratuite excelente de șabloane complete ale site-urilor PSD pentru portofolii, pagini de pornire, bloguri și multe alte categorii. Acestea sunt desenele perfecte pentru a începe să vă familiarizați cu a “general” configurare web. Fiecare site va avea nevoi diferite pentru elementele de pagină și va trebui să determinați elementele importante.

Iată un exemplu PSD numit "AppCivilization", proiectat de Martin Fabricius. Aspectul este prezentat pentru un studio de creatie care proiecteaza aplicatii mobile si eventual site-uri web. În partea de jos veți găsi un panou mic de pictograme de aplicații prezentate într-un portofoliu. De asemenea, veți observa că întregul desen este spart orizontal într-un antet, prezentarea de sus, conținutul principal și footerul întunecat.

Sursa originală - descărcare

Proiectarea paginilor de destinație

Să ne uităm la un alt freebie proiectat de Martin. Următorul exemplu este o pagină de destinație pe care ați putea să o utilizați pentru a vinde orice tip de produse. În general, acestea sunt bunuri digitale care pot fi descărcate de către utilizator, adică aplicații, fotografii, pictograme, șabloane etc..

Sursa originală - descărcare

Dar cea mai bună parte a designului său este că este foarte flexibil pentru începători să lucreze în jur. Antetul încă folosește o navigație superioară mică cu o imagine mare, dar în special acțiunile așteptate ale utilizatorului sunt diferite. Are un mare “Cumpar-o!” buton care se află chiar deasupra ori. Pe o pagină de destinație a produsului, aceasta ar atrage mai multă atenție decât o slideshow jQuery.

O altă tehnică de interfață uimitoare este reprezentarea de mici dimensiuni a iPhone-ului în mijlocul paginii. Martin include o fotografie de previzualizare iPhone, butonul App Store și o mică listă de caracteristici cheie. Când vizitatorii caută detalii despre produs, nu puteți face lucrurile mai simple decât printr-o listă formatată.

Mai multe șabloane:

Iată câteva template-uri gratuite PSD pe care le-am lansat în trecere:

Șablonul PSD pentru site-ul de afaceri "BiZ"
"ThinkJuice" Site de produs PSD Template
Site-ul profesional pentru site-ul PSD
"Polo360" Portofoliu site PSD Template

Ați putea fi interesat și de următoarele:

Șabloane de site-uri de afaceri
"În curând" tutoriale de pagină + șabloane

Navigare principală a site-ului

Meniurile și butoanele sunt doar unelte pentru construirea unor elemente de pagină mult mai mari. Nu există nici o negare că navigația principală a site-ului dvs. deține un scop foarte important. Aveți nevoie ca site-ul dvs. să fie ușor accesibil cu metode de rezervă posibile pentru utilizatorii mobili.

Mai jos este o bară rece de navigare cu un efect de textură de coasere. Stilul de evidențiere poate fi prezentat ca o cutie întunecată sau ca un vârf în jos îndreptat spre conținutul paginii. Acest stil a fost proeminent de-a lungul anilor și arată bine în setarea potrivită.

Sursa originală - descărcare

Un alt aspect similar este această navigație cu textură tipărită proiectată de Edi Gil. Îmi place foarte mult cum această a doua navbar include atât o listă de link-uri, cât și câteva butoane suplimentare de pagină. Veți dori să oferiți linkuri secundare vizitatorilor unde vă pot găsi profilurile în jurul Web-ului.

Sursa originală - descărcare

Șabloane alternative de meniu

În afară de bara de navigare tipică orizontală, există și alte stiluri de design care trebuie luate în considerare. Link-urile verticale pot fi împărțite în sub-rubrici diferite, ceea ce lasă mai mult spațiu pentru conținutul paginii.

Luați de exemplu meniul freebie de mai jos conceput de site-ul Icojam.

Fiecare poziție este construită pentru a se extinde și a se restrânge pe baza obiectului selectat. În plus, designul permite ca un număr mic de contoare să stea în partea dreaptă a fiecărei categorii. Acest lucru ar fi cel mai bine să completați ca o navigare pe blog pentru a număra câte postări sunt depuse în fiecare subiect.

Sursa originală - descărcare

Sfaturi de navigare / Tutoriale:

50+ Curățați scripturile de navigare bazate pe fila CSS
Breadcrumb Navigation Best Practices & Exemple
Construirea navigației mobile cu jQuery
Codarea Breadcrumb Navigare În CSS3
Proiectarea navigației cu mai puțin CSS

Formule Web mai curat

Era modernă a Internetului este departe de a fi un static de întâlnire. Utilizatorii au în comun informații și interacționează în mod constant între ei pe o bază zilnică. Majoritatea acestui partajare de text și media este gestionată prin intermediul unor formulare web.

Ar trebui să ne uităm la câteva exemple despre modul în care puteți proiecta intrări și butoane cu formă curată. Designul elementelor dvs. poate merge mult spre invitarea vizitatorilor dvs. pentru a le folosi efectiv. Și, la rândul său, construiește credibilitatea site-ului dvs. și captează mai multe afișări de pagină.

Câmpuri de conectare

Există câteva exemple minunate de formular PSD de conectare pentru a fi verificate. Această conexiune gratuită prin intermediul WP Scientist are toate elementele dvs. standard. Două câmpuri de introducere pentru login / parola, un buton de trimitere și casetele de selectare pentru a gestiona modulele cookie pentru sesiuni.

Acest model de design este perfect dacă puteți implementa efectele prin jQuery. Capul cu săgeți din dreapta sus vă face să vă gândiți la o configurare a ferestrelor în stil pop-up. Aceasta este o tehnică minunată de a economisi spațiu pe site-ul dvs., păstrând forma ascunsă până când un utilizator face clic pe linkul de înregistrare.

Sursa originală - descărcare

Formularul de mai jos este gratuit pentru a descărca datorită designerului Gil Huybrecht. El a folosit un model similar cu un fundal granular și textura hârtiei. Ceea ce îmi place mai mult în designul lui Gil este elementul "supradimensionat". Este mult mai prietenos aterizând pe un formular de autentificare care umple întreaga pagină. Utilizatorii pot vedea cu ușurință ce scriu și mai puțin aglomerație.

Sursa originală - descărcare

Dacă sunteți experimentat ca dezvoltator frontend folosind CSS3, atunci este foarte ușor să traduceți acest cod în cod. Puteți chiar să aplicați efectul de strălucire exterior selectat și colțurile rotunjite pentru butoanele și câmpurile de introducere.

Contacte

O altă formă pe care o veți găsi pe practic fiecare site web este un formular de contact. În mod normal, acestea vor include câmpuri pentru numele, e-mailul și conținutul mesajului expeditorului.

Freebie de mai jos este un exemplu minunat de a folosi texturi personalizate și icoane.

Design-ul folosește, de asemenea textul substituentului în loc de etichete. Aceasta inseamna ca atunci cand formularul intareste fiecare camp este setat cu o valoare implicita (ex: numele tau). Dar, atunci când începeți să tastați, substituentul se șterge și conținutul dvs. este afișat. Toate browserele compatibile cu standardele vor susține acest efect și vă pot economisi spațiu pe pagină.

Sursa originală - descărcare

Un alt minunat minunat pentru a apuca este această formă de contact în formă de tabel, proiectată de cei talentați Jonno Riekwel. Acest design este mult mai simplu și are etichete caracteristice deasupra fiecărei intrări. Aceasta este o soluție excelentă pentru întreprinderi mai mari sau pentru companii care au nevoie să trimită mesaje de-a lungul diferitelor departamente ale companiei.

Sursa originală - descărcare

Tutoriale Formulare de Contact:

Formular de înregistrare / înregistrare: idei și exemple frumoase
Creați un formular de conectare pentru efectul de hârtie stivuită
Creați un formular de contact HTML5 / CSS3 bazat pe Ajax

Panglici și bannere

Cu doar 6 sau 7 ani în urmă, colțurile rotunjite începuseră să crească în tendințele de design populare. Acum am ajuns și mai mult cu umbre și panglici de colț.

Sursa originală - descărcare

Unele dintre aceste elemente pot fi folosite ca elemente de design, cum ar fi un contor de comentarii sau ca o dată de publicare pentru un blog. Panglica cusută deasupra este perfectă pentru portofolii sau pagini de proiect unde doriți să captați atenția vizitatorului dvs. Puteți încerca, de asemenea, o panglică verticală similară în care designul scade din partea de sus.

Aceste efecte minuțioase ale paginilor merg mult spre îmbunătățirea aspectului. Vizitatorii iau notă și vor iubi aceste plăceri estetice. Însă considerați că panglicile mici de colț sunt doar o parte a acestei tendințe de design.

Sursa originală - descărcare

În plus, desenele pline pe bannere au devenit extrem de populare pentru construirea recunoașterii mărcii. Puteți să le utilizați în logo-ul dvs., în navigare, pe pagina principală sau chiar pe postările de blog prezentate. Implicațiile sunt practic nelimitate, cu capacități bune de proiectare.

Înfășurarea colțului

Un alt efect de banner cu panglică foarte specific este realizat prin împachetarea designului în jurul colțului paginii. Acest lucru creează iluzia paginii dvs. fiind 3-D, iar panglica este înfășurată în partea de sus a site-ului dvs. Web.

Design-ul de mai jos este gratuit 100% pentru descărcare și poate fi folosit pentru ideile proprii de proiect. Puteți vedea cum acest lucru atrage atenția vizitatorilor și de ce această tendință a crescut într-o astfel de frenezie. Aveți grijă să nu excesați bannerele. În vrac, acestea pot deveni foarte enervante, la fel ca și efectele lucioase / oglindite mai vechi "web 2.0".

Sursa originală - descărcare

Proiectare cu butoane

În afară de hyperlink-uri veți obține cea mai mare interacțiune de la vizitatori cu butoane. Aceste elemente de pagină pot efectua orice prin intermediul apelurilor jQuery și Ajax, cu excepția faptului că puteți folosi și butoane pentru conectarea la conținut static, cum ar fi descărcări gratuite, de exemplu!

Kitul UI de mai jos, proiectat de Matt Gentile are mult mai mult decât butoane. Setul său PSD este fantastic pentru începători care caută să ridice gradienți și texturi pentru a construi forme similare. De multe ori veți găsi butoane de calitate mai bună în kiturile UI decât în cazul PSD-urilor singulare.

Sursa originală - descărcare

Cum se creează variații

Pe măsură ce petreceți timp practicând aceste tehnici, veți dori să creați multe stiluri diferite în timp. Acest lucru poate duce la comutarea unor butoane similare între diferite proiecte și machete. Un exemplu bun este setul de nasturi cu lapte oferit de designer Robert van Klinken.

Sursa originală - descărcare

Fiecare dintre cele trei butoane originale are un stil de gradient diferit, cu excepția stării de hover și a stărilor active care arată asemănătoare. Când lucrați în Photoshop, va trebui să potriviți culorile dintre gradienți sau să mutați culorile pe un strat de efecte. Cu aceasta intelegere ai putea chiar sa-ti construiesti seturile de butoane proprii pentru download!

Sursa originală - descărcare

Textile din lemn + hârtie

Când aveți nevoie să vă îmbinați design-urile de bază, atunci va trebui să vă deplasați spre mai multe metode greoaie. Texturile sunt întotdeauna binevenite dacă le puteți implementa în mod corespunzător prin fundaluri CSS sau conținut în lățime de setare. Și două dintre cele mai populare texturi pe care le-am văzut sunt lemnul și hârtia goală.

Ideea notepad-ului este foarte simplă, dar poate funcționa într-un design atractiv de branding, fie ca parte a unui element de interfață cu utilizatorul, fie integrat în întregul aspect. Dar hârtia nu arata întotdeauna cel mai bine pe cont propriu, iar o alta textura poate ajuta stilurile sa se amestece. Aici se pot juca texturi mai detaliate din lemn.

Sursa originală - descărcare

Imaginile vor ieși afară și vor arăta minunate învelite într-o cochilie exterioară. Întregul concept de textură este de a oferi site-ului dvs. un sentiment sau emoție specifică. Temele de lemn pot evoca un sentiment de acasă și de natură. Există chiar și un set minunat de UI din lemn pentru descărcare de către Jeremiah Wingett. Dacă vă simțiți creativi, încercați să puneți niște texturi proprii și să vedeți cum funcționează într-un mediu bazat pe web.

28 texturi din lemn de înaltă rezoluție

Concluzie

Cei mai buni designeri web sunt cei care practică zilnic și nu lasă niciodată eșecurile lor să le descurajeze de la obiectivele lor finale. Trebuie să răspundeți rapid și să vă întoarceți repede din succes și din încercări eșuate. Sfaturile și freebies din acest ghid ar trebui să fie un bun punct de plecare pentru a începe să învățați cum să construiți concepte diferite de pagini pentru un proiect web. Și am vrea să citim gândurile tale despre această problemă în zona de discuții post.