Killer Web UI izkārtojumu izstrāde ar Freebies - Ultimate Guide
Tīmekļa dizaina joma tikai dažus īsus gadus ir veikusi paša savu elpu. Tagad visā pasaulē ir aktīvāki dizaineri nekā jebkad agrāk, sadarbojoties inovatīvās projektu idejās. Un daudzas no šīm tendencēm ir izstrādātas, izmantojot profesionālus grafikas dizainerus.
Tas var aizņemt mēnešus vai pat gadus, pirms jūs pilnībā saprotat lietotāja interfeisa veidošanas tehniskos aspektus. Jums ir jāapsver lapu elementu izmēri un izvietojums, kā arī teksta un etiķešu lasāmība. Ar nelielu brīvo laiku jūs varat ienirt minimālisma pieeju, lai veidotu tīmekļa vietnes ar mazākiem un samazinātu neskaidrības. Un pat tad ir arī daudzas citas dizaina metodes.
Par šo rokasgrāmatu es esmu izveidojis pāris mūsdienīgas lietotāja saskarnes dizaina metodes ar bezmaksas lejupielādes un spēlēt ar. Es ceru, ka tas dos kādu motivāciju tiem, kas interesējas par karjeras veidošanu grafikas / web dizaina jomā. Pat profesionāli web dizaineri var atrast dažas no šīm tendencēm, kas noderēs nākamajam projektam.
Prakse ar pilnām veidnēm
Ja jums ir prasmes veidot savu noformējumu no nulles, nav nepieciešams sākt ar veidnēm. No otras puses, iesācēji var justies ērtāk, sākot ar pilnu dizainu un strādājot ar sīkākām detaļām.
Portfeļiem, mājas lapām, emuāriem un daudzām citām kategorijām ir pieejamas lieliskas bezmaksas PSD tīmekļa vietņu veidnes. Tie ir ideāls dizains, lai sāktu darbu, lai iepazītos ar a “vispārīgi” tīmekļa izkārtojums. Katrai vietnei būs dažādas lapas elementu vajadzības, un jums būs jānosaka, kuri vienumi ir svarīgi.
Šeit ir PSD piemērs, ko sauc par "AppCivilization", kuru izstrādāja Martin Fabricius. Izkārtojums ir redzams radošā studijā, kas projektē mobilās lietotnes un, iespējams, tīmekļa vietnes. Uz leju jūs atradīsiet nelielu aplikāciju ikonas, kas attēlotas portfelī. Jūs arī pamanīsiet, ka viss dizains ir sadalīts horizontāli galvenē, augšējā slaidrādē, galvenajā saturā un tumšākā kājenē.
Oriģinālais avots - lejupielāde
Izvietošanas lapu projektēšana
Paskatīsimies uz citu freebie, ko arī izstrādājis Martin. Šis nākamais piemērs ir galamērķa lapa, kuru var izmantot, lai pārdotu jebkāda veida produktus. Parasti tās ir digitālas preces, kuras var lejupielādēt no lietotāja, tas ir, lietotnes, fotogrāfijas, ikonas, veidnes utt.
Oriģinālais avots - lejupielāde
Bet labākā viņa dizaina daļa ir tā, ka iesācējiem ir ļoti elastīgi strādāt apkārt. Virsrakstā joprojām tiek izmantota neliela top navigācija ar lielu attēlu, bet īpaši paredzamās lietotāja darbības ir atšķirīgas. Viņam ir liels “To iegādāties!” poga, kas izceļas tieši virs pārsega. Produkta izvietošanas lapā tas pievērst lielāku uzmanību nekā jQuery slaidrāde.
Vēl viena lieliska lietotāja interfeisa tehnika ir maza iPhone funkcija, kas tiek rādīta vidū uz leju. Martin ietver iPhone priekšskatījuma shot, App Store pogu un nelielu galveno funkciju sarakstu. Kad apmeklētāji meklē informāciju par produktu, jūs nevarat vienkāršot lietas, nekā izmantojot formatētu sarakstu.
Vairāk veidņu:
Šeit ir pāris bezmaksas PSD veidnes, ko izlaida caurlaide:
- "BiZ" biznesa tīmekļa vietnes PSD veidnes
- "ThinkJuice" produktu vietnes PSD veidne
- Profesionālā biznesa portāla PSD veidne
- "Polo360" portfeļa vietnes PSD veidne
Iespējams, jūs interesē arī šādi:
- Uzņēmuma tīmekļa vietņu veidnes
- "Drīzumā" lapas pamācības + veidnes
Galvenās vietnes navigācija
Izvēlnes un pogas ir tikai instrumenti, lai veidotu daudz lielākus lapu elementus. Nav noliedzams, ka jūsu vietnes galvenajai navigācijai ir ļoti nozīmīgs mērķis. Jums tas ir nepieciešams, lai jūsu vietne būtu viegli pieejama ar iespējamām rezerves metodēm mobilajiem lietotājiem.
Zemāk ir atdzist navigācijas josla ar šuves tekstūru. Izceltais stils var būt attēlots kā tumšs lodziņš vai kā lejupvērsts gals, kas norāda uz lapas saturu. Šis stils ir bijis ievērojams gadu gaitā un izskatās lieliski pareizajā vidē.
Oriģinālais avots - lejupielāde
Vēl viena līdzīga freebie ir šī teksturētā galvenes navigācija Edi Gil. Man tiešām patīk, kā šī otrā navigācijas josla ietver gan saišu sarakstu, gan dažas papildu lapu pogas. Jūs vēlaties piedāvāt sekundāras saites apmeklētājiem, kur viņi var atrast jūsu profilus tīmeklī.
Oriģinālais avots - lejupielāde
Alternatīvi izvēlnes stili
Papildus tipiskajai horizontālajai navigācijas joslai ir arī citi dizaina stili. Vertikālās saites var sadalīt dažādās apakšpozīcijās, kas atstāj vairāk vietas lapas saturam.
Veikt, piemēram, izvēlni freebie zemāk, ko izstrādājusi mājas lapa Icojam.
Katra pozīcija ir veidota tā, lai paplašinātu un sakļautu, pamatojoties uz izvēlēto objektu. Turklāt dizains ļauj nelielam skaitļu skaitītājam sēdēt katras kategorijas labajā pusē. Tas vislabāk aizpildītu kā emuāra navigāciju, lai aprēķinātu, cik amatu ir iesniegti katrā tēmā.
Oriģinālais avots - lejupielāde
Navigācijas padomi / konsultācijas:
- 50+ tīrās CSS tabulas navigācijas skripti
- Breadcrumb navigācijas paraugprakse un piemēri
- Mobilās navigācijas izveide ar jQuery
- Kodēšana Breadcrumb navigācija CSS3
- Navigācijas projektēšana ar LESS CSS
Tīrākas tīmekļa veidlapas
Mūsdienu interneta laikmets ir tālu no statiskas tikšanās vietas. Lietotāji katru dienu pastāvīgi apmainās ar informāciju un savstarpēji sadarbojas. Lielāko daļu šī teksta un mediju koplietošanas pārvalda, izmantojot tīmekļa veidlapas.
Mums vajadzētu apskatīt tikai dažus piemērus, kā veidot tīras izskata formas un pogas. Jūsu elementu dizains var būt tālu, lai aicinātu apmeklētājus tos izmantot. Un tas savukārt palielina jūsu vietnes uzticamību un sniedz vairāk lapas skatījumu.
Pieteikšanās lauki
Ir daži lieliski pieteikšanās veidlapu PSD piemēri, lai pārbaudītu. Šis pieteikšanās freebie caur WP zinātnieks ir visi jūsu standarta elementi. Divi ievades lauki pieteikšanās / paroles ievadīšanai, iesniegšanas poga un izvēles rūtiņas sesijas sīkfailu pārvaldīšanai.
Šis dizaina modelis ir ideāls, ja jūs varat īstenot efektus, izmantojot jQuery. Augšējā labā bultiņas galva liek domāt par uznirstošo stilu. Šī ir brīnišķīga tehnika, lai ietaupītu vietu jūsu vietnē, saglabājot formu slēpto, līdz lietotājs noklikšķina uz saites.
Oriģinālais avots - lejupielāde
Zemāk esošā veidlapa ir brīvi lejupielādējama, pateicoties dizainerim Gil Huybrecht. Viņš izmantoja līdzīgu modeli ar graudainu fonu un papīra struktūru. Man īpaši patīk Gil dizains ir "negabarīta" elementi. Tas ir daudz draudzīgāks piezemēšanās uz pieteikšanās veidlapu, kas aizpilda visu lapu. Lietotāji var viegli redzēt, ko viņi raksta, un ir mazāk traucējumu.
Oriģinālais avots - lejupielāde
Ja esat pieredzējis kā frontendu attīstītājs, izmantojot CSS3, tad tas ir ļoti viegli tulkot šo grafiku kodā. Jūs pat varat īstenot izvēlēto ārējo spīduma efektu un noapaļotus stūriem, kas paredzēti pogai un ievades laukiem.
Kontakti
Vēl viena veidlapa, kuru jūs atradīsiet praktiski katrā tīmekļa vietnē, ir kontaktforma. Tas parasti ietver laukus sūtītāja vārdam, e-pastam un ziņu saturam.
Zemāk esošais freebie ir lielisks piemērs, kā izmantot pielāgotas faktūras un ikonas.
Dizains arī izmanto vietas vārda teksts etiķešu vietā. Tas nozīmē, ka, kad veidlapa pirmo reizi tiek ielādēta, katrs lauks tiek iestatīts ar noklusējuma vērtību (piem., Jūsu vārdu). Bet tad, kad sākat rakstīt vietas rezervētāju, tā vietā tiek parādīts jūsu saturs. Visi standartiem atbilstošie pārlūkprogrammas atbalstīs šo efektu, un tas var ietaupīt kādu vietu lapā.
Oriģinālais avots - lejupielāde
Vēl viena brīnišķīga bezmaksas tērzēšana, kas ir greifers, ir šī cilnes kontaktforma, ko izstrādājusi talantīga Jonno Riekwel. Šis dizains ir daudz vienkāršāks un iezīmē iezīmes virs katra ievades. Tas ir lielisks risinājums lielākiem uzņēmumiem vai jaunizveidotiem uzņēmumiem, kuriem ir jāsūta ziņojumi, izmantojot dažādus uzņēmuma nodaļas.
Oriģinālais avots - lejupielāde
Kontaktu veidlapu konsultācijas:
- Pieteikšanās / reģistrācijas forma: idejas un skaisti piemēri
- Izveidojiet „Stacked-paper Effect Login” veidlapu
- Izveidojiet Ajax bāzes HTML5 / CSS3 kontaktu formu
Lentes un baneri
Tikai 6 vai 7 gadus atpakaļ noapaļoti stūri sāka pieaugt populārās dizaina tendencēs. Tagad mēs esam aizgājuši vēl tālāk ar pilienu ēnām un stūra lentēm.
Oriģinālais avots - lejupielāde
Dažus no šiem elementiem var izmantot kā dizaina galvenos elementus, piemēram, komentāru skaitītāju vai emuāra publicēšanas datumu. Iepriekš izšūtā lente ir ideāli piemērota portfeļiem vai projekta lapām, kur vēlaties uzņemt apmeklētāja uzmanību. Jūs varat arī izmēģināt līdzīgu vertikālu lenti, kur dizains nokrīt no augšas.
Šīs nelielās lappušu sekas ir tālu, lai uzlabotu savu izkārtojumu. Apmeklētāji ņem vērā un mīl šos estētiskos priekus. Taču uzskata, ka mazās stūra lentes ir tikai daļa no šīs dizaina tendences.
Oriģinālais avots - lejupielāde
Bez tam pilna reklāmkaroga dizains ir kļuvis neparasti populārs zīmola atpazīstamības veidošanā. Jūs varat tos izmantot savā logotipā, navigācijā, mājaslapā vai pat redzamajos bloga ziņojumos. Ietekme ir praktiski neierobežota ar labām dizaina iespējām.
Stūra iesaiņošana
Vēl viens ļoti specifisks lentes banner efekts tiek veikts, iesaiņojot dizainu ap jūsu lapas stūri. Tas veido jūsu lapas ilūziju, kas ir 3-D, un lente tiek apvilkta jūsu vietnes augšējā daļā.
Zemāk redzamais dizains ir 100% bezmaksas lejupielādei, un to var izmantot jūsu pašu projektu idejām. Jūs varat redzēt, kā tas vērš uzmanību no apmeklētājiem un kāpēc šī tendence ir kļuvusi par šādu neprātu. Esiet uzmanīgi, lai neizmantotu baneri. Vairumā gadījumu tie var ļoti kaitēt līdzīgi vecākiem "web 2.0" spīdīgajiem / atspoguļotajiem efektiem.
Oriģinālais avots - lejupielāde
Projektēšana ar pogām
Neatkarīgi no hipersaites jūs saņemsiet visvairāk mijiedarbību no apmeklētājiem ar pogām. Šīs lapas var veikt kaut ko, izmantojot zvanus, izmantojot jQuery un Ajax zvanus, izņemot jūs varat izmantot arī pogas, lai savienotu ar statisku saturu, piemēram, freebie lejupielādes.!
Zemāk redzamais lietotāja interfeisa komplekts Matt Gentile ir daudz vairāk nekā tikai pogas. Viņa PSD komplekts ir fantastisks iesācējiem, kas vēlas uzņemt slīpumus un tekstūras, lai veidotu līdzīgas formas. Bieži vien UI komplektos atradīsiet daudz augstākas kvalitātes pogas nekā ar atsevišķiem PSD.
Oriģinālais avots - lejupielāde
Kā izveidot variācijas
Kā jūs pavadīt laiku, praktizējot šos paņēmienus, laika gaitā vēlaties izveidot daudz dažādu stilu. Tas var izraisīt līdzīgu pogu maiņu starp dažādiem projektiem un izkārtojumiem. Labs piemērs ir dizainera piedāvātās piena pogas Robert van Klinken.
Oriģinālais avots - lejupielāde
Katrai no trim sākotnējām pogām ir atšķirīgs slīpuma stils, izņemot hover un aktīvos stāvokļus, kas izskatās līdzīgi. Strādājot Photoshop, jums būs jāatbilst krāsām starp gradientiem vai pārvietot krāsas uz efektu slāni. Ar šo izpratni jūs pat varētu izveidot savas pogas, kas paredzētas lejupielādei!
Oriģinālais avots - lejupielāde
Koksne + papīra tekstūra
Kad jums ir nepieciešams spice up jūsu pamata izkārtojums dizainu, tad jums ir pāriet uz vairāk veikls metodes. Tekstūras vienmēr ir laipni gaidītas, ja tās var pareizi īstenot, izmantojot CSS fonu vai iestatījuma platuma saturu. Un divi no populārākajiem tekstiem, ko esmu redzējis, ir koka un tukši papīri.
Notepad ideja ir patiešām vienkārša, bet tā var strādāt par atdzist zīmola dizainu vai nu kā lietotāja interfeisa elementa daļu, vai arī iebūvēt visu izkārtojumu. Taču papīrs ne vienmēr izskatās pats par sevi labākais, un cita veida tekstūra var palīdzēt stilu saplūšanai..
Oriģinālais avots - lejupielāde
Attēli izceļas un izskatās brīnišķīgi, ietinēti ārējā apvalkā. Visa tekstūras koncepcija ir sniegt jūsu vietnei īpašu sajūtu vai emocijas. Koka tēmas var izraisīt mājas un dabas sajūtu. Jeremijas Vingetas lejupielādei ir pat lielisks koka tīmekļa lietotāja interfeisa komplekts. Ja jūtaties radoši, mēģiniet salikt dažas savas faktūras un redzēt, kā tās darbojas tīmekļa vidē.
28 Augstas izšķirtspējas koka tekstūras
Secinājums
Labākie web dizaineri ir tie, kas ikdienā praktizē un nekad neļauj saviem neveiksmēm atturēties no gala mērķiem. Jums ir jābūt atsaucīgiem un ātri atgriezties gan no veiksmīgiem, gan neveiksmīgiem mēģinājumiem. Šajā rokasgrāmatā sniegtajiem padomiem un bezmaksas biļetēm vajadzētu būt labam sākumpunktam, lai sāktu mācīties, kā veidot dažādus tīmekļa koncepcijas veidus tīmekļa projektam. Un mēs vēlētos izlasīt jūsu domas par šo jautājumu pēc diskusiju jomā.
