Design Killer Web UI rozložení s freebies - Ultimate Guide
Pole web design se na sebe vzalo za pár málo let. Existuje více aktivních designérů po celém světě než kdy jindy, všichni spolupracují na inovativních nápadech projektu. A koncepty mnoha z těchto trendů byly vyvinuty prostřednictvím profesionálních grafických designérů.
To může trvat měsíce nebo dokonce roky, než plně pochopíte technické aspekty budování uživatelského rozhraní. Musíte zvážit velikosti a umístění prvků stránky, také čitelnost textu a štítků. S trochou volného času můžete kopat do minimalistického přístupu k vytváření webových stránek s menšími a menšími zmatky. A dokonce i pak existují desítky dalších návrhových technik, které je třeba zvážit.
Pro tuto příručku jsem pár pároval moderní techniky návrhu uživatelského rozhraní s zdarma ke stažení a hrát si s nimi. Je to moje naděje, že to nabídne motivaci těm, kteří se zajímají o kariéru v oblasti stavební grafiky / web designu. Dokonce i profesionální web designéři mohou najít několik z těchto trendů užitečné pro váš další projekt.
Praxe s plnými šablonami
Když máte dovednosti navrhnout si vlastní rozvržení od nuly, není třeba začínat se šablonami. Na druhou stranu začátečníci se mohou cítit pohodlněji od úplného designu a přes práce s jemnějšími detaily.
Tam jsou některé vynikající zdarma ke stažení plné PSD webové stránky šablony pro portfolia, domovské stránky, blogy, a mnoho dalších kategorií. Jedná se o dokonalé návrhy, jak začít se seznamovat s “Všeobecné” webové rozložení. Každá webová stránka bude mít různé požadavky na prvky stránky a budete muset určit, které položky jsou důležité.
Zde je příklad PSD nazvaný "AppCivilization", který navrhl Martin Fabricius. Rozložení je určeno pro kreativní studio, které navrhuje mobilní aplikace a případně webové stránky. Směrem ke dnu najdete malý panel ikon aplikací zobrazených v portfoliu. Všimněte si také, že celý design je rozdělen horizontálně do záhlaví, horní prezentace, hlavního obsahu a ztmaveného zápatí.
Původní zdroj - ke stažení
Navrhování vstupních stránek
Podívejme se na další freebie, kterou navrhl Martin. Tento další příklad je vstupní stránka, kterou můžete použít k prodeji jakéhokoli typu produktů. Obecně se jedná o digitální zboží, které může uživatel stáhnout, tj. Aplikace, fotografie, ikony, šablony atd.
Původní zdroj - ke stažení
Ale nejlepší část jeho designu je, že je velmi flexibilní pro začátečníky. Záhlaví stále používá malou horní navigaci s velkým obrázkem, ale zejména očekávané akce uživatele se liší. Má velký “Koupit!” tlačítko, které vyčnívá přímo nad záhybem. Na vstupní stránce produktu by to přineslo více pozornosti než prezentace jQuery.
Další skvělý UI technika je malý iPhone funkce zobrazení uprostřed-cesta dolů stránky. Martin obsahuje náhled na iPhone, tlačítko App Store a malý seznam klíčových funkcí. Když návštěvníci hledají podrobnosti o produktu, nemůžete dělat věci jednodušší než přes formátovaný seznam.
Další šablony:
Zde je pár volných šablon PSD, které jsme vydali v průkazu:
- "BiZ" Obchodní webové stránky PSD šablony
- "ThinkJuice" Product Site PSD šablony
- Profesionální obchodní stránky PSD šablona
- "Polo360" Portfolio stránek PSD šablona
Také vás mohou zajímat následující:
- Obchodní webové stránky šablony
- Návody na téma "Již brzy" + šablony
Hlavní webová navigace
Menu a tlačítka jsou jen nástroje pro vytváření mnohem větších prvků stránky. Není pochyb o tom, že hlavní navigace vaší webové stránky má velmi významný účel. Je třeba, aby byl váš web snadno dostupný s možnými záložními metodami pro mobilní uživatele.
Níže je chladná navigační lišta s efektem šití textur. Styl zvýraznění může být zobrazen jako tmavý rámeček nebo jako tip směřující dolů do obsahu stránky. Tento styl byl prominentní v průběhu let a vypadá skvěle ve správném prostředí.
Původní zdroj - ke stažení
Další podobná freebie je tato texturou navigace hlavičky navržený Edi Gil. Líbí se mi, jak tento druhý navbar obsahuje jak seznam odkazů, tak i další tlačítka na stránce. Budete chtít nabídnout návštěvníkům sekundární odkazy, kde mohou najít své profily na webu.
Původní zdroj - ke stažení
Styly alternativních nabídek
Kromě typické horizontální navigační lišty existují další styly designu, které je třeba zvážit. Vertikální odkazy lze rozdělit do různých podokruhů, což ponechává větší prostor pro obsah stránky.
Vezměte si například nabídku freebie níže navrženou na webových stránkách Icojam.
Každé záhlaví je vytvořeno tak, aby se rozbalilo a sbalilo na základě vybraného objektu. Navíc design umožňuje, aby malý počet čítačů seděl na pravé straně každé kategorie. To by nejlépe vyplnilo jako blog navigace spočítat, kolik příspěvků jsou uloženy v rámci každého tématu.
Původní zdroj - ke stažení
Tipy pro navigaci / Návody:
- 50+ Clean CSS Tab-Based Navigační skripty
- Nejlepší postupy a příklady pro navigaci po chlebech
- Vytváření mobilní navigace pomocí jQuery
- Kódování navigace s chlebem v CSS3
- Navrhování navigace s LESS CSS
Čistší webové formuláře
Moderní doba internetu je daleko od statického setkání. Uživatelé neustále sdílejí informace a každodenně komunikují. Většina tohoto sdílení textu a médií je řízena prostřednictvím webových formulářů.
Měli bychom se podívat na několik příkladů, jak můžete navrhovat vstupy a tlačítka s čistým vzhledem. Design vašich prvků může jít dlouhou cestu k pozvání návštěvníků, aby je skutečně používali. A to zase vytváří důvěryhodnost vašich stránek a získává více zobrazení stránky.
Pole pro přihlášení
Existuje několik skvělých příkladů PSD pro přihlášení. Toto přihlášení je bezplatné Vědec WP má všechny vaše standardní prvky. Dvě vstupní pole pro přihlášení / heslo, tlačítko Odeslat a zaškrtávací políčka pro správu souborů cookie relace.
Tento model designu je ideální, pokud můžete implementovat efekty prostřednictvím jQuery. Hlava pravé šipky vpravo vás napadne nastavením okna ve stylu vyskakovacího okna. Jedná se o skvělou techniku, jak ušetřit místo na svých webových stránkách tím, že ponecháte formulář skrytý, dokud uživatel neklikne na odkaz registrace.
Původní zdroj - ke stažení
Níže uvedený formulář je zdarma ke stažení díky návrháři Gil Huybrecht. Použil podobný vzor s zrnitým pozadím a texturou papíru. Zvláště na Gilově návrhu se mi líbí "nadrozměrné" prvky. Je to mnohem přátelštější přistání na přihlašovacím formuláři, který vyplní celou stránku. Uživatelé mohou snadno zjistit, co píšou, a tam je méně nepořádek.
Původní zdroj - ke stažení
Pokud máte zkušenosti s vývojářem frontendu pomocí CSS3, pak je velmi snadné přeložit tuto grafiku do kódu. Vybraný efekt vnějšího záře a zaoblené rohy můžete dokonce implementovat do polí tlačítek a vstupů.
Kontakty
Další formulář, který najdete na prakticky každé webové stránce, je kontaktní formulář. To obvykle zahrnuje pole pro jméno odesílatele, e-mail a obsah zprávy.
Níže uvedená ukázka je úžasným příkladem použití vlastních textur a ikon.
Design také používá zástupný text místo štítků. To znamená, že při prvním načtení formuláře je každé pole nastaveno na výchozí hodnotu (např. Vaše jméno). Když ale začnete psát, zástupný symbol se vymaže a váš obsah se zobrazí místo něj. Všechny prohlížeče vyhovující standardům podporují tento efekt a mohou ušetřit nějaké místo na stránce.
Původní zdroj - ke stažení
Dalším úžasným freebie, které je možné chytit, je tento kontaktní formulář navržený talentovanými Jonno Riekwel. Tento design je mnohem jednodušší a obsahuje popisky nad každým vstupem. To je skvělé řešení pro větší firmy nebo začínající firmy, které potřebují posílat zprávy prostřednictvím různých oddělení ve společnosti.
Původní zdroj - ke stažení
Návody k formulářům kontaktů:
- Přihlášení / Registrační formulář: Nápady a krásné příklady
- Vytvořte formulář přihlášení efektu skládaného papíru
- Vytvořte Ajax-založené HTML5 / CSS3 kontaktní formulář
Stuhy a nápisy
Před šesti nebo sedmi lety se začaly objevovat zaoblené rohy v populárních trendech designu. Teď jsme ještě dál s stíny a rohové pásky.
Původní zdroj - ke stažení
Některé z těchto prvků lze použít jako zvýraznění designu, jako například počítadlo komentářů nebo datum publikování blogu. Šitá stuha nahoře je ideální pro portfolia nebo stránky projektu, kde chcete zachytit pozornost návštěvníka. Můžete také vyzkoušet podobnou svislou stuhu, kde design klesá shora.
Tyto drobné stránky efekty jít dlouhou cestu ke zlepšení vašeho rozložení. Návštěvníci si všimnou a budou milovat tyto estetické požitky. Ale vezměte v úvahu, že malé rohové pásky jsou jen částí tohoto trendu designu.
Původní zdroj - ke stažení
Kromě toho, full-on banner design se staly šíleně populární pro budování značky uznání. Můžete je využít ve svém logu, navigaci, domovské stránce nebo dokonce na doporučených příspěvcích na blogu. Důsledky jsou prakticky neomezené s dobrými konstrukčními schopnostmi.
Zabalení rohu
Dalším velmi specifickým efektem bannerového pásu je zabalení návrhu kolem rohu stránky. To vytváří iluzi vaší stránky, která je 3-D a stuha je omotána kolem horní části webu.
Níže uvedený design je 100% zdarma ke stažení a lze jej použít pro vlastní nápady. Můžete vidět, jak by to přitahovalo pozornost návštěvníků a proč se tento trend rozrostl na takové šílenství. Dávejte pozor, abyste nadužívali bannery. Ve velkém, tyto mohou dostat velmi nepříjemné podobně jako starší "web 2.0" lesklý / zrcadlené efekty.
Původní zdroj - ke stažení
Návrh s tlačítky
Kromě hypertextových odkazů získáte od návštěvníků nejvíce interakcí s tlačítky. Tyto položky stránek mohou provádět cokoliv pomocí hovorů jQuery a Ajax s výjimkou, že můžete také použít tlačítka pro propojení se statickým obsahem, například ke stažení zdarma.!
Sada UI níže, navržená firmou Matt Gentile má mnohem víc než jen tlačítka. Jeho sada PSD je fantastická pro začátečníky, kteří chtějí vyzvednout přechody a textury pro vytváření podobných forem. Často můžete najít mnohem kvalitnější tlačítka v sadách uživatelských rozhraní, než s jednotlivými jednotkami PSD.
Původní zdroj - ke stažení
Jak vytvořit variace
Jak trávíte čas praktikováním těchto technik, budete chtít v průběhu času vytvořit mnoho různých stylů. To může mít za následek přepínání podobných tlačítek mezi různými projekty a rozvrženími. Dobrým příkladem je sada mléčných tlačítek nabízená designérem Robert van Klinken.
Původní zdroj - ke stažení
Každé z původních tří tlačítek má jiný styl přechodu, kromě přechodu a aktivních stavů, které vypadají podobně. Při práci ve Photoshopu budete muset přizpůsobit barvy mezi přechody nebo přesunout barvy na vrstvu efektů. S tímto porozuměním můžete dokonce vytvořit vlastní tlačítka freebie pro stahování!
Původní zdroj - ke stažení
Dřevo + papír textury
Pokud potřebujete okorenit své základní návrhy rozvržení, pak budete muset přejít k více lstivým metodám. Textury jsou vždy vítány, pokud je můžete správně implementovat pomocí CSS pozadí nebo obsahu šířky. A dva z nejpopulárnějších textur, které jsem viděl, jsou dřevo a prázdné papíry.
Poznámkový blok je opravdu jednoduchý, ale může pracovat až do cool brandingového designu buď jako součást elementu uživatelského rozhraní, nebo jako celek vašeho rozvržení. Papír však nevypadá vždycky nejlépe a jeho styl může napomoci další struktuře..
Původní zdroj - ke stažení
Obrázky vyniknou a vypadají nádherně zabalené do vnějšího obalu. Celé pojetí textury je, aby vaše webové stránky konkrétní pocit nebo emoce. Dřevěné motivy mohou vyvolat pocit domova a přírody. Tam je dokonce úžasné dřevěné webové UI kit pro stažení Jeremiah Wingett. Pokud se cítíte kreativní, zkuste sestavit některé z vlastních textur a uvidíte, jak fungují ve webovém prostředí.
28 Dřevěné textury s vysokým rozlišením
Závěr
Nejlepší web designéři jsou ti, kteří denně trénují a nikdy nenechají své neúspěchy odradit od svých konečných cílů. Musíte být citliví a rychle se odrazit od úspěchu i neúspěšných pokusů. Tipy a tipy v této příručce by měly být dobrým výchozím bodem pro začátek učení, jak vytvářet různé koncepty stránek pro webový projekt. A rádi bychom si přečetli vaše myšlenky o této záležitosti v oblasti po diskusi.
