A gyilkos webes felhasználói felület elrendezések tervezése a Freebies - Ultimate Guide segítségével
A web design területe néhány rövid év alatt saját levegőt vett. Jelenleg aktívabb tervezők találhatók világszerte, mint valaha, és együttműködnek az innovatív projekt ötleteken. Ezeknek a trendeknek a mögött húzódó elképzeléseket professzionális grafikusok fejlesztették ki.
Több hónap vagy akár évek is eltelhetnek, mielőtt teljesen megértheted a felhasználói felület építésének technikai feltételeit. Meg kell fontolnia az oldalelemek méretét és elhelyezését, valamint a szöveg és a címkék olvashatóságát. Egy kis szabadidővel a minimalista megközelítéssel bukkanhat a weboldalak építésére, és kevesebb zavart okozhat. És még akkor is több tucat más tervezési technika is figyelembe vehető.
Ehhez az útmutatóhoz párosítottam modern felhasználói felület tervezési technikák val vel ingyenes letöltések és játsszon. Remélem, hogy ez motivációt fog nyújtani azoknak, akik érdeklődnek a grafika / webdesign karrierje iránt. Még a profi webes tervezők is találhatnak néhány ilyen trendet a következő projekthez.
Gyakorlat teljes sablonokkal
Ha megvan a képessége, hogy saját elrendezését megtervezze semmiből, nem kell sablonokkal kezdeni. A kezdők ugyanakkor kényelmesebbek lehetnek, kezdve a teljes tervezéstől és a finomabb részletekig.
A portfóliók, honlapok, blogok és sok más kategória kiváló PSD-sablonok kiváló letöltései vannak. Ezek a tökéletes tervek ahhoz, hogy elkezdjék megismerkedni a “Tábornok” webes elrendezés. Minden webhelynek különböző igényei lesznek az oldalelemekre, és meg kell határoznia, hogy mely elemek fontosak.
Itt van egy PSD-példa, az úgynevezett "AppCivilization", amelyet Martin Fabricius tervezett. Az elrendezés egy kreatív stúdió számára készült, aki mobilalkalmazásokat és esetleg weboldalakat tervez. Az alsó rész felé egy kis panel található a portfólióban bemutatott alkalmazásikonokról. Azt is észre fogja venni, hogy az egész design vízszintesen felbomlik egy fejlécbe, a felső diavetítésbe, a fő tartalomba és a sötétített láblécbe.
Eredeti forrás - letöltés
A céloldalak tervezése
Nézzünk egy másik freebie-t, amelyet Martin is tervezett. Ez a következő példa egy olyan nyitóoldal, amelyet bármilyen típusú termék eladására használhat. Általában ezek a digitális termékek, amelyeket a felhasználó letölthet, azaz az alkalmazások, fotók, ikonok, sablonok stb.
Eredeti forrás - letöltés
De a design legjobb része az, hogy nagyon rugalmas a kezdők számára, hogy dolgozzanak körül. A fejléc még mindig kis méretű, nagy képpel rendelkező felső navigációt használ, de a várt felhasználói műveletek különbözőek. Nagy van “Megvenni!” gomb, amely kiemelkedik a hajtás felett. Egy termék céloldalán ez nagyobb figyelmet kap, mint a jQuery diavetítés.
Egy másik nagyszerű UI technika a kis iPhone funkció megjelenítése az oldal közepén. Martin tartalmaz egy iPhone előnézeti képet, az App Store gombot és egy kis listát a legfontosabb funkciókról. Amikor a látogatók termékinformációkat keresnek, nem lehet egyszerűbbé tenni a dolgokat, mint egy formázott listán.
További sablonok:
Íme néhány ingyenes PSD-sablon, amelyeket kiadtunk a passban:
- "BiZ" üzleti weboldal PSD sablonok
- "ThinkJuice" termékoldal PSD sablon
- Professzionális üzleti oldal PSD sablon
- "Polo360" portfólióhelyi PSD sablon
Ön is érdekelhet ezek közül:
- Üzleti honlap sablonok
- "Hamarosan" oldal oktatói + sablonok
Főoldal navigáció
A menük és a gombok csak a sokkal nagyobb oldalelemek létrehozására szolgáló eszközök. Nem tagadható, hogy webhelye fő navigációja nagyon fontos célt szolgál. Szüksége van rá, hogy a webhely könnyen hozzáférhető legyen a mobil felhasználók számára elérhető esetleges visszaállítási módszerekkel.
Az alábbiakban egy hűvös navigációs sáv található, amely varrási textúrájú hatással rendelkezik. A kiemelés stílusa sötétített dobozként vagy lefelé mutató csúcsként is megjeleníthető az oldal tartalmához. Ez a stílus az évek során kiemelkedő volt és jól néz ki a megfelelő beállításban.
Eredeti forrás - letöltés
Egy másik hasonló freebie ez a texturált fejléc navigáció Edi Gil. Nagyon szeretem, hogy ez a második Navbar tartalmazza a linkek listáját és néhány további oldalgombot. Másodlagos hivatkozásokat kíván nyújtani a látogatóknak, ahol megtalálhatják a profiljaikat az interneten.
Eredeti forrás - letöltés
Alternatív menüstílusok
A tipikus vízszintes navigációs sávon kívül más tervezési stílusokat is figyelembe kell venni. A függőleges hivatkozások különböző alfejezetekre oszthatók, amelyek több helyet biztosítanak az oldal tartalmának.
Vegyük például a freebie menüt, amelyet az Icojam honlapja tervezett.
Minden egyes fejléc úgy van kialakítva, hogy a kiválasztott objektum alapján kibővüljön és összecsukjon. Továbbá a design lehetővé teszi, hogy egy kis számszámláló üljön az egyes kategóriák jobb oldalán. Ez a legjobb, ha blogbejegyzésként számolná, hogy hány hozzászólás van az egyes témákban.
Eredeti forrás - letöltés
Navigációs tippek / oktatóanyagok:
- 50+ Tiszta CSS lapalapú navigációs parancsfájl
- Breadcrumb navigációs legjobb gyakorlatok és példák
- Mobil navigáció kiépítése a jQuery segítségével
- Breadcrumb navigáció kódolása CSS3-ban
- Navigáció tervezése LESS CSS segítségével
Tisztább webes űrlapok
Az internet modern kora messze van egy statikus találkozóhelytől. A felhasználók folyamatosan információkat cserélnek egymással, és napi rendszerességgel kommunikálnak egymással. A szöveg és a médiamegosztás nagy részét webes űrlapok kezelik.
Csak néhány példát kell megvizsgálnunk, hogyan tervezhetünk tiszta megjelenésű formanyomtatványokat és gombokat. Elemeinek kialakítása hosszú utat jelenthet a látogatók meghívására, hogy ténylegesen használják őket. Ez pedig a webhely hitelességét és több oldalmegtekintést hoz létre.
Bejelentkezés mezők
Néhány nagyszerű példa a bejelentkezési űrlapra a PSD-kről. Ez a bejelentkezés freebie keresztül WP tudós rendelkezik az összes standard elemével. Két beviteli mező a bejelentkezéshez / jelszóhoz, egy elküldési gomb és jelölőnégyzetek a munkamenet cookie-k kezeléséhez.
Ez a modell tökéletes, ha a hatásokat a jQuery segítségével valósíthatja meg. A jobb felső nyílfej felugró stílusú ablak-beállításra gondol. Ez egy csodálatos technika, hogy helyet takarítson meg a webhelyén úgy, hogy az űrlapot elrejti, amíg a felhasználó nem kattint a regisztrációs linkre.
Eredeti forrás - letöltés
Az alábbi űrlap a tervezőnek köszönhetően ingyenesen letölthető Gil Huybrecht. Hasonló mintát használt a szemcsés háttérrel és a papír textúraával. Amit különösen szeretek Gil tervezése során, a "túlméretezett" elemek. Ez egy sokkal barátságosabb leszállás egy bejelentkezési űrlapon, amely kitölti az egész oldalt. A felhasználók könnyen láthatják, hogy mit írnak, és kevésbé zavaró.
Eredeti forrás - letöltés
Ha tapasztalt a CSS3-as frontend fejlesztőként, akkor ezt a grafikát nagyon könnyen le lehet fordítani kódba. Még a kiválasztott külső fényhatást és a lekerekített sarkokat is végrehajthatja a gomb és a beviteli mezők számára.
Kapcsolatok
Egy másik űrlap, amelyet gyakorlatilag minden weboldalon talál, egy kapcsolati űrlap. Ez általában magában foglalja a küldő nevét, e-mailjét és az üzenet tartalmát.
Az alábbi freebie fantasztikus példa az egyéni textúrák és ikonok használatára.
A design is használható helyőrző szöveg címkék helyett. Ez azt jelenti, hogy amikor az űrlap először betöltődik, minden mezőt alapértelmezett értékkel állít be (pl. A nevét). De aztán, amikor elkezdi beírni a helyőrzőt, a tartalom helyett megjelenik. Minden szabványnak megfelelő böngésző támogatja ezt a hatást, és megtakaríthat egy kis helyet az oldalon.
Eredeti forrás - letöltés
Egy másik csodálatos freebie, hogy megragadja ezt a lapozott kontaktformát, amelyet a tehetséges Jonno Riekwel. Ez a kialakítás sokkal egyszerűbb, és az egyes bemenetek fölött a címkék vannak. Ez nagyszerű megoldás azoknak a nagyobb vállalkozásoknak vagy induló vállalkozásoknak, akiknek a cég különböző szervezeti egységein keresztül kell üzeneteket küldeniük.
Eredeti forrás - letöltés
Kapcsolati űrlapok oktatói:
- Bejelentkezési / regisztrációs űrlap: Ötletek és szép példák
- Hozzon létre egy halmozott papírhatás bejelentkezési űrlapot
- Hozzon létre egy Ajax-alapú HTML5 / CSS3 kapcsolati űrlapot
Szalagok és bannerek
Csak 6 vagy 7 évvel ezelőtt a lekerekített sarkok kezdtek emelkedni a népszerű tervezési trendekben. Most még tovább haladtunk az árnyékokkal és a sarokszalagokkal.
Eredeti forrás - letöltés
Ezen elemek némelyike használható mint kiemelt elem, például egy hozzászólásszámláló vagy egy blog közzétételének dátuma. A fenti varrott szalag tökéletesen alkalmas olyan portfóliókra vagy projektoldalakra, ahol a látogató figyelmét szeretné rögzíteni. Megpróbálhat egy hasonló függőleges szalagot is, ahol a design felülről esik.
Ezek az apró oldalhatások hosszú távon tovább növelik az elrendezést. A látogatók észreveszik és szeretik ezeket az esztétikai kényelmet. De vegye figyelembe, hogy a kis sarokszalagok csak egy részét képezik a tervezési trendnek.
Eredeti forrás - letöltés
Emellett a teljes körű banner-tervek rendkívül népszerűvé váltak a márkaismeret felépítésében. Használhatja ezeket a logójában, a navigációban, a honlapon, vagy akár a blogbejegyzéseken is. A hatások gyakorlatilag korlátlanok, jó tervezési képességekkel.
A sarok csomagolása
Egy másik nagyon specifikus szalagbefolyásoló hatását úgy alakítjuk ki, hogy a tervlapot az oldal sarkán körbevágjuk. Ez a 3-D oldal illúzióját építi fel, és a szalag a weblapod felső részén van becsomagolva.
Az alábbi tervezés 100% -ban ingyenesen letölthető és felhasználható saját projektidejéhez. Láthatjuk, hogy ez hogyan vonzza a látogatók figyelmét, és miért nőtt ez a trend ilyen őrületbe. Ügyeljen arra, hogy ne használja túl a bannereket. Nagy mennyiségben ezek nagyon idegesítenek, mint a régebbi "web 2.0" fényes / tükrözött hatások.
Eredeti forrás - letöltés
Tervezés gombokkal
A hiperhivatkozásokon kívül a leggyakrabban a látogatók közötti interakciókat kapja meg a gombokkal. Ezek az oldalelemek a jQuery és az Ajax hívások segítségével bármit is elvégezhetnek, kivéve a statikus tartalomhoz, például freebie letöltésekhez való kapcsolódáshoz használt gombokat is.!
Az alábbiakban ismertetett UI-készlet Matt Gentile sokkal több, mint a gombok. PSD szettje fantasztikus a kezdőknek, akik hasonló formák építésére alkalmas színátmeneteket és textúrákat keresnek. Gyakran gyakran sokkal jobb minőségű gombokat talál az UI-készletekben, mint az egyedi PSD-knél.
Eredeti forrás - letöltés
Változatok létrehozása
Ahogy időt töltesz ezeknek a technikáknak a gyakorlásában, sok különböző stílust szeretnél létrehozni az idő múlásával. Ez hasonló gombok váltását eredményezheti a különböző projektek és elrendezések között. Jó példa erre a tervező által kínált tejes gombok Robert van Klinken.
Eredeti forrás - letöltés
Az eredeti három gomb mindegyikének eltérő színátmenete van, kivéve a lebegő és aktív állapotokat, amelyek hasonlóak. A Photoshop alkalmazásakor a színeket a színátmenetek között kell egyeznie, vagy a színeket egy effekt rétegre mozgatni. Ezzel a megértéssel még a saját freebie gombjainkat is letölthetjük!
Eredeti forrás - letöltés
Fa + papír Textúrák
Amikor meg kell fűzni az alapelrendezési mintáit, akkor inkább ügyesebb módszerekre kell lépnie. A textúrák mindig szívesen láthatók, ha a CSS háttérrel vagy a beállított szélességű tartalommal megfelelően megvalósíthatja azokat. És a leglátogatottabb textúrák közül kettő a fa és az üres papír.
A Jegyzettömb ötlet nagyon egyszerű, de hűvös márkaképzésre képes, akár felhasználói felület elemként, akár az elrendezés teljes egészében beépítve. A papír azonban nem mindig önmagában néz ki a legjobban, és egy másik textúra segíthet a stílusok beilleszkedésében. Itt találhatók a részletesebb fa textúrák..
Eredeti forrás - letöltés
A képek kiemelkednek, és külső burkolatba kerülnek. A textúrának az egész koncepciója az, hogy a honlapodnak egy bizonyos érzést vagy érzést adjon. A fa témái otthon és természetérzetet idézhetnek elő. Még egy fantasztikus fából készült webes felhasználói felületkészlet van, amelyet Jeremiah Wingett letölthet. Ha kreatívnak érzed magad, próbáld meg összeállítani saját textúráit, és nézd meg, hogyan működnek a webes környezetben.
28 Nagyfelbontású fa textúrák
Következtetés
A legjobb webes tervezők azok, akik naponta gyakorolják, és soha nem hagyják, hogy a kudarcaik megakadályozzák a végső céljukat. A sikerre és a sikertelen kísérletekre gyorsan reagálnia kell, és gyorsan vissza kell térnie. Az ebben az útmutatóban található tippek és freebies jó kiindulópontnak kell lenniük ahhoz, hogy elkezdjék megtanulni, hogyan lehet különböző webkoncepciókat építeni egy webprojekthez. És szeretnénk elolvasni a témával kapcsolatos gondolatait a hozzászólás utáni területen.
