Navrhovanie Killer Web UI Layouts s Freebies - Ultimate Guide
Oblasť dizajnu webových stránok si zobrala svoj vlastný dych len niekoľko krátkych rokov. Na celom svete je viac aktívnych dizajnérov než kedykoľvek predtým, všetci spolupracujú na inovatívnych projektových nápadoch. A koncepty mnohých z týchto trendov boli vyvinuté prostredníctvom profesionálnych grafikov.
Môže trvať mesiace alebo dokonca roky, kým úplne nerozumiete technickým aspektom budovania používateľského rozhrania. Musíte zvážiť veľkosti a umiestnenie prvkov stránky, tiež čitateľnosť textu a štítkov. S trochou voľného času sa môžete ponoriť do minimalistického prístupu k budovaniu webových stránok s menším a zmenšujúcim sa zmätkom. A dokonca aj tu sú desiatky ďalších dizajnových techník, ktoré je potrebné zvážiť.
Pre túto príručku som pár spárovaných moderné techniky návrhu používateľského rozhrania s freebies si môžete stiahnuť a hrať sa s. Dúfam, že to ponúkne nejakú motiváciu pre tých, ktorí majú záujem o kariéru v oblasti tvorby grafiky / web dizajnu. Dokonca aj profesionálni web dizajnéri môžu nájsť niektoré z týchto trendov užitočné pre váš ďalší projekt.
Prax s plnohodnotnými šablónmi
Keď máte schopnosti navrhnúť svoje vlastné rozloženie od začiatku, nie je potrebné začať s šablónami. Začiatočníci, na druhej strane, sa môžu cítiť pohodlnejšie, počnúc plným dizajnom a pracujúcimi na jemnejších detailoch.
Existuje niekoľko vynikajúcich bezplatných sťahovaní plných šablón webových stránok PSD pre portfóliá, domovské stránky, blogy a mnoho ďalších kategórií. Jedná sa o dokonalý dizajn, ako začať s oboznámiť sa s “všeobecný” web layout. Každá webová stránka bude mať rôzne potreby stránkových prvkov a budete musieť určiť, ktoré položky sú dôležité.
Tu je príklad PSD nazvaný "AppCivilization", ktorý navrhol Martin Fabricius. Rozloženie je určené pre kreatívne štúdio, ktoré navrhuje mobilné aplikácie a prípadne webové stránky. V spodnej časti nájdete malý panel ikon aplikácií zobrazených v portfóliu. Tiež si všimnete, že celý dizajn je rozdelený horizontálne do hlavičky, najvyššej prezentácie, hlavného obsahu a tmavšej päty.
Zdroj pôvodu - Stiahnutie
Navrhovanie vstupných stránok
Poďme sa pozrieť na ďalšie freebie tiež navrhol Martin. Ďalším príkladom je vstupná stránka, ktorú môžete použiť na predaj akéhokoľvek produktu. Vo všeobecnosti ide o digitálny tovar, ktorý môže používateľ stiahnuť, t. J. Aplikácie, fotografie, ikony, šablóny atď.
Zdroj pôvodu - Stiahnutie
Ale najlepšia časť jeho dizajnu spočíva v tom, že pre začiatočníkov je veľmi flexibilný. Záhlavie stále používa malú hornú navigáciu s veľkým obrázkom, ale hlavne očakávané akcie používateľa sú odlišné. Má veľký “Kúpiť!” ktoré sa nachádza priamo nad záhybom. Na vstupnej stránke produktu by sa táto pozornosť venovala väčšej pozornosti než slideshow jQuery.
Ďalšou skvelou technológiou používateľského rozhrania je malá funkcia iPhone zobrazená v strede stránky. Martin obsahuje snímku pred náhľadom na iPhone, tlačidlo App Store a malý zoznam kľúčových funkcií. Keď si návštevníci hľadajú podrobnosti o produktoch, nemôžete robiť veci jednoduchšie ako pomocou formátovaného zoznamu.
Ďalšie šablóny:
Tu je niekoľko bezplatných šablón PSD, ktoré sme vydali v priečinku:
- "BiZ" Obchodné webové stránky PSD šablóny
- Šablóna PSD produktu ThinkJuice
- Šablóna PSD pre profesionálne obchodné stránky
- "Polo360" Portfólio stránky Šablóna PSD
Tiež by vás mohli zaujímať nasledovné:
- Šablóny firemných webových stránok
- "Príďte čoskoro" stránky tutoriály + šablóny
Hlavná navigácia na stránkach
Menu a tlačidlá sú len nástrojmi na vytváranie oveľa väčších prvkov stránky. Nie je popreté, že hlavná navigácia vašej webovej stránky má veľmi významný účel. Potrebujete, aby boli vaše stránky ľahko dostupné s možnými alternatívnymi metódami pre mobilných používateľov.
Nižšie je chladný navigačný panel s efektom šitia textúry. Zvýraznený štýl sa môže zobraziť ako tmavé pole alebo ako hrot smerujúci dole smerujúci do obsahu stránky. Tento štýl je prenikavý v priebehu rokov a vyzerá skvelo v správnom nastavení.
Zdroj pôvodu - Stiahnutie
Ďalšou podobnou voľbou je táto textúrovaná hlavička navigácie navrhnutá Edi Gil. Veľmi sa mi páči, že tento druhý navigačný panel obsahuje aj zoznam odkazov a niektoré ďalšie tlačidlá stránky. Budete chcieť ponúknuť sekundárne odkazy na návštevníkov, kde môžu nájsť vaše profily po webe.
Zdroj pôvodu - Stiahnutie
Alternatívne štýly ponúk
Okrem typického vodorovného navigačného panela existujú ďalšie štýly, ktoré je potrebné zvážiť. Vertikálne prepojenia je možné rozdeliť na rôzne podkapitoly, čo ponecháva väčší priestor pre obsah stránky.
Vezmite si napríklad voľbu menu nižšie navrhnutú webovou stránkou Icojam.
Každá položka je zostavená tak, aby sa rozbalila a zbalila na základe vybratého objektu. Navyše dizajn umožňuje, aby malý počet počítačov sedel na pravej strane každej kategórie. To by najlepšie vyplnilo ako navigáciu v blogoch, aby sa zistilo, koľko príspevkov sa podáva v každej téme.
Zdroj pôvodu - Stiahnutie
Tipy pre navigáciu / Návody:
- 50+ Čisté navigačné skripty založené na záložkách CSS
- Breadcrumb Navigation Best Practices & Examples
- Budovanie mobilnej navigácie pomocou jQuery
- Kódovanie Breadcrumb Navigácia V CSS3
- Navrhovanie navigácie pomocou LESS CSS
Čistejšie webové formuláre
Moderný vek internetu je ďaleko od statického stretnutia. Používatelia neustále zdieľajú informácie a navzájom si navzájom spolupracujú. Väčšina tohto zdieľania textu a médií je spravovaná prostredníctvom webových formulárov.
Mali by sme sa pozrieť na niekoľko príkladov, ako môžete navrhnúť čisté vyzerajúce vstupy a tlačidlá. Návrh vašich prvkov môže ísť dlhú cestu k pozvaniu vašich návštevníkov, aby ich skutočne používali. A to zase vytvára dôveryhodnosť vášho webu a získava viac zobrazení stránky.
Prihlasovacie polia
Existuje niekoľko skvelých príkladov prihlasovacích formulárov PSD, ktoré si môžete vyskúšať. Toto prihlásenie zadarmo cez WP Scientist má všetky vaše štandardné prvky. Dve vstupné polia na prihlásenie / heslo, tlačidlo odoslania a začiarkavacie políčka na správu súborov cookie relácie.
Tento model dizajnu je dokonalý, ak môžete implementovať efekty prostredníctvom jQuery. Horná hlava šípky vpravo vám umožňuje premýšľať o nastavení okna v popup okne. Je to úžasná technika na šetrenie miesta na vašich webových stránkach tým, že držíte formulár skrytý dovtedy, kým používateľ klikne na registračný odkaz.
Zdroj pôvodu - Stiahnutie
Formulár uvedený nižšie je zadarmo k stiahnutiu vďaka návrhárovi Gil Huybrecht. Použil podobný vzor so zrnitým pozadím a textúrou papiera. Zvlášť, čo sa mi týka dizajnu Gil, je "nadmerné" prvky. Je to oveľa priateľskejšie pristátie na prihlasovacom formulári, ktorý vyplní celú stránku. Používatelia môžu ľahko zistiť, čo píšu, a je to menej neporiadok.
Zdroj pôvodu - Stiahnutie
Ak máte skúsenosti ako vývojár frontend pomocou CSS3, je super jednoduché preložiť túto grafiku do kódu. Môžete dokonca implementovať zvolený efekt vonkajšieho žiarenia a zaoblené rohy pre tlačidlá a vstupné polia.
kontakty
Ďalšia forma, ktorú nájdete na prakticky každej webovej stránke, je kontaktný formulár. Obvykle to bude obsahovať polia pre meno odosielateľa, e-mail a obsah správ.
Freebie nižšie je úžasný príklad používania vlastných textúr a ikon.
Návrh tiež používa zástupný text namiesto štítkov. To znamená, že pri prvom načítaní formulára sa každé pole nastaví s predvolenou hodnotou (napr .: vaše meno). Ale potom ako začnete písať, zástupný symbol sa vymaže a váš obsah sa zobrazí namiesto toho. Všetky tieto prehliadače budú podporovať tento efekt a môžu vám ušetriť určitý priestor na stránke.
Zdroj pôvodu - Stiahnutie
Ďalšou skvelou voľnou záležitosťou je uchopiť túto kontaktnú formu, ktorú navrhli talentovaní Jonno Riekwel. Tento dizajn je oveľa jednoduchší a má štítky s vlastnosťami nad každým vstupom. To je skvelé riešenie pre väčšie podniky alebo začínajúce podniky, ktoré potrebujú posielať správy pozdĺž rôznych oddelení v spoločnosti.
Zdroj pôvodu - Stiahnutie
Tutoriály na kontaktné formuláre:
- Prihlasovací / registračný formulár: Myšlienky a krásne príklady
- Vytvoriť prihlasovací formulár efektov vkladaných papierov
- Vytvorte kontaktný formulár HTML5 / CSS3 založený na programe Ajax
Stuhy a bannery
Len pred šiestimi alebo siedmymi rokmi zaostávali zaoblené rohy v populárnych trendoch dizajnu. Teraz sme ešte prísť s tieňmi stúpania a rohovými stuhami.
Zdroj pôvodu - Stiahnutie
Niektoré z týchto prvkov môžu byť použité ako najdôležitejšie prvky dizajnu, napríklad počítadlo komentárov alebo ako dátum publikovania blogu. Stitched ribbon vyššie je ideálny pre portfólio alebo stránky projektu, kde chcete zachytiť pozornosť vášho návštevníka. Môžete tiež vyskúšať podobnú vertikálnu stuhu, v ktorej sa dizajn dostane zhora.
Tieto nepatrné efekty stránok vám pomôžu dlhú cestu, aby ste zlepšili svoje rozloženie. Návštevníci si uvedomia a budú radi tieto estetické zdvorilosti. Ale zvážte, že malé rohové stuhy sú len súčasťou tohto dizajnérskeho trendu.
Zdroj pôvodu - Stiahnutie
Navyše plnohodnotné návrhy bannerov sa stali nesmierne populárne pre budovanie značky. Môžete ich využiť vo svojom logu, navigácii, domovskej stránke alebo dokonca aj na oficiálnych blogových príspevkoch. Dôsledky sú prakticky neobmedzené s dobrými konštrukčnými schopnosťami.
Obalenie rohu
Ďalším veľmi špecifickým efektom bannerovej pásky sa vykonáva balením dizajnu okolo rohu stránky. To vytvára ilúziu, že vaša stránka je 3-D a páska je zabalená okolo hornej časti vašej webovej stránky.
Nižšie uvedený návrh je 100% bezplatný na prevzatie a môže byť použitý pre vlastné projektové nápady. Môžete vidieť, ako to bude od návštevníkov upútať pozornosť a prečo tento trend narástol na taký šialenstvo. Dávajte pozor, aby ste bannery nadmerne nepoužívali. Hromadne to môže byť veľmi nepríjemné podobne ako staršie "web 2.0" lesklé / zrkadlené efekty.
Zdroj pôvodu - Stiahnutie
Navrhovanie pomocou tlačidiel
Okrem hypertextových odkazov získate najviac interakcií od návštevníkov s tlačidlami. Tieto položky stránok môžu vykonávať čokoľvek pomocou volaní jQuery a Ajax, okrem toho, že môžete použiť aj tlačidlá na prepojenie so statickým obsahom, ako napríklad bezplatné preberanie súborov!
Súbor používateľského rozhrania uvedený nižšie, ktorý navrhol Matt Gentile má oveľa viac než len tlačidlá. Jeho sada PSD je fantastická pre začiatočníkov, ktorí chcú vyzdvihnúť gradienty a textúry pre vytváranie podobných foriem. Častokrát nájdete v kľúči UI oveľa vyššiu kvalitu ako v prípade singulárnych PSD.
Zdroj pôvodu - Stiahnutie
Ako vytvoriť variácie
Ako budete tráviť čas cvičiť tieto techniky budete chcieť vytvoriť veľa rôznych štýlov v čase. To môže viesť k prepínaniu podobných tlačidiel medzi rôznymi projektmi a rozloženiami. Dobrým príkladom je mliečne nastaviteľné tlačidlá, ktoré ponúka návrhár Robert van Klinken.
Zdroj pôvodu - Stiahnutie
Každé z pôvodných troch tlačidiel má iný gradientový štýl, s výnimkou vzťažných a aktívnych stavov, ktoré vyzerajú podobne. Pri práci vo Photoshope budete musieť zodpovedať farbám medzi prechodmi alebo presunúť farby na vrstvu efektov. S týmto porozumením by ste si dokonca mohli vytvoriť svoje vlastné tlačidlá na stiahnutie zadarmo!
Zdroj pôvodu - Stiahnutie
Texty dreva + papiera
Keď budete potrebovať ozdobiť svoje základné rozloženie návrhov potom budete musieť prejsť k šikovnejšie metódy. Textúry sú vždy vítané, ak ich môžete správne implementovať pomocou pozadia CSS alebo obsahu s nastavenou šírkou. A dve z najpopulárnejších textúr, ktoré som videl, sú drevo a prázdne papiere.
Západný nápad je naozaj jednoduchý, ale dokáže pracovať na dizajne cool značky buď ako súčasť prvku používateľského rozhrania alebo integrovaného do celku vášho rozloženia. Ale papier nie vždy vyzerá najlepšie sám o sebe a iná textúra môže pomôcť tomu, aby sa štýly zmiešali. Toto je miesto, kde sa môžu dostať podrobnejšie textúry dreva.
Zdroj pôvodu - Stiahnutie
Obrázky vystupujú a vyzerajú úžasne zabalené vo vonkajšom plášti. Celá koncepcia textúry prináša vašim webovým stránkam určitý pocit alebo emócie. Drevené motívy môžu vyvolať pocit domova a prírody. Existuje dokonca aj úžasný drevený web UI kit na stiahnutie Jeremiah Wingett. Ak sa cítite kreatívny, skúste zostaviť niektoré z vašich vlastných textúr a uvidíte, ako sa vykonávajú v prostredí založenom na webe.
28 Texty dreva s vysokým rozlíšením
záver
Najlepší web dizajnéri sú tí, ktorí praktizujú denne a nikdy nedovolia, aby ich neúspechy odradili od svojich konečných cieľov. Musíte reagovať rýchlo a rýchlo sa odraziť z úspechu aj z neúspešných pokusov. Tipy a freebies v tejto príručke by mali byť dobrým východiskovým bodom pre začatie učenia, ako vytvoriť rôzne koncepty stránok pre webový projekt. A radi by sme si prečítali svoje myšlienky o tejto záležitosti v diskusnej oblasti.
