Kuriant „Killer Web UI“ išdėstymus su „Freebies“ - „Ultimate Guide“
Vos per kelerius metus žiniatinklio dizaino laukas paėmė savo kvapą. Dabar visame pasaulyje yra daugiau aktyvių dizainerių nei bet kada, bendradarbiaujant naujoviškų projektų idėjose. Ir daugelio šių tendencijų koncepcijos buvo sukurtos per profesionalius grafikos dizainerius.
Tai gali užtrukti mėnesius ar net metus, kol visiškai suprantate vartotojo sąsajos kūrimo techninius aspektus. Turite apsvarstyti puslapio elementų dydžius ir vietą, taip pat teksto ir etikečių įskaitomumą. Šiek tiek laisvo laiko galite įveikti minimalistinį požiūrį į svetainių kūrimą mažiau ir sumažinti painiavą. Ir netgi tada taip pat yra daugybė kitų dizaino technikų.
Šiame vadove suporavau kai kuriuos modernios vartotojo sąsajos projektavimo technikos su nemokama, galite atsisiųsti ir žaisti. Tikiuosi, kad tai pasiūlys tam tikrą motyvaciją tiems, kurie domisi karjeros kūrimu grafikos / interneto dizaino srityje. Net profesionalūs interneto dizaineriai gali surasti keletą šių tendencijų naudingiems kitam projektui.
Praktika su visais šablonais
Kai turite įgūdžių kurti savo išdėstymą nuo nulio, nereikia pradėti šablonų. Kita vertus, pradedantysis gali jaustis patogiau, pradedant nuo pilno dizaino ir dirbdami su smulkesnėmis detalėmis.
Yra keletas puikių nemokamų PSD svetainės šablonų atsisiuntimų portfeliams, tinklalapiams, tinklaraščiams ir daugeliui kitų kategorijų. Tai yra puikus dizainas, kad galėtumėte pradėti susipažinti su a “bendra” žiniatinklio išdėstymas. Kiekviena svetainė turės skirtingus puslapių elementų poreikius ir turėsite nustatyti, kurie elementai yra svarbūs.
Čia yra PSD pavyzdys, vadinamas „AppCivilization“, kurį sukūrė Martin Fabricius. Įrenginys rodomas kūrybinei studijai, kuriančiai mobilias programas ir galbūt svetaines. Dugno apačioje rasite mažą programų piktogramų grupę, rodomą portale. Jūs taip pat pastebėsite, kad visas dizainas yra suskaidytas horizontaliai į antraštę, viršų skaidrių peržiūrą, pagrindinį turinį ir tamsesnę poraštę.
Originalus šaltinis - atsisiuntimas
Nukreipimo puslapių projektavimas
Pažvelkime į kitą „Martin“ sukurtą nemokamą dovaną. Šis kitas pavyzdys yra nukreipimo puslapis, kurį galite naudoti bet kokio tipo produktų pardavimui. Paprastai tai skaitmeninės prekės, kurias gali atsisiųsti naudotojas, t. Y. Programos, nuotraukos, piktogramos, šablonai ir kt.
Originalus šaltinis - atsisiuntimas
Tačiau geriausia jo dizaino dalis yra tai, kad pradedantiesiems tai yra labai lanksti. Antraštėje vis dar naudojama maža viršutinė navigacija su dideliu vaizdu, tačiau ypač tikėtini naudotojo veiksmai yra skirtingi. Jis turi didelį “Pirk!” mygtukas, kuris išsiskiria tiesiai virš viršaus. Produkto nukreipimo puslapyje tai atkreiptų daugiau dėmesio nei „jQuery“ skaidrių demonstracija.
Kitas puikus UI metodas yra mažas „iPhone“ funkcijos rodymas viduryje žemyn. „Martin“ apima „iPhone“ peržiūros peržiūrą, „App Store“ mygtuką ir nedidelį pagrindinių funkcijų sąrašą. Kai lankytojai ieško informacijos apie produktą, jūs negalite padaryti nieko paprastesnio, nei suformatuotu sąrašu.
Daugiau šablonų:
Štai keletas nemokamų PSD šablonų, kuriuos išleido leidime:
- „BiZ“ verslo svetainės PSD šablonai
- „ThinkJuice“ produkto svetainės PSD šablonas
- Profesionalaus verslo svetainės PSD šablonas
- „Polo360“ portfelio svetainės PSD šablonas
Galbūt jus domina šie:
- Verslo svetainių šablonai
- „Netrukus“ puslapio vadovėliai + šablonai
Pagrindinė svetainės navigacija
Meniu ir mygtukai yra tik įrankiai kuriant daug didesnius puslapio elementus. Negalima paneigti, kad pagrindinė jūsų svetainės navigacija yra labai svarbi. Jums reikia, kad jūsų svetainė būtų lengvai prieinama su galimais atsarginių metodų mobiliesiems vartotojams.
Žemiau yra vėsioje naršymo juostoje su susiuvimo tekstūros efektu. Paryškinimo stilius gali būti rodomas kaip tamsintas langelis arba kaip žemyn nukreiptas patarimas, nukreipiantis į puslapio turinį. Šis stilius buvo ryškus per daugelį metų ir puikiai atrodo teisingai.
Originalus šaltinis - atsisiuntimas
Kitas panašus nemokamą dovaną - tai tekstūruota antraštės navigacija, kurią sukūrė Edi Gil. Man labai patinka, kaip ši antroji juosta apima ir nuorodų sąrašą, ir kai kuriuos papildomus puslapio mygtukus. Norėsite pasiūlyti antrines nuorodas lankytojams, kur jie gali rasti jūsų profilius internete.
Originalus šaltinis - atsisiuntimas
Alternatyvūs meniu stiliai
Be tipinės horizontalios navigacijos juostos yra ir kitų dizaino stilių. Vertikalios nuorodos gali būti suskirstytos į įvairias subkategorijas, kurios palieka daugiau vietos puslapio turiniui.
Paimkite, pavyzdžiui, „freebie“ meniu, kurį sukūrė interneto svetainė Icojam.
Kiekviena antraštė sukurta išplėsti ir žlugti pagal pasirinktą objektą. Be to, dizainas leidžia mažam skaičiui skaitiklui sėdėti dešinėje kiekvienos kategorijos pusėje. Tai geriausiai užpildytų kaip dienoraščio naršymą, kad būtų galima suskaičiuoti, kiek pranešimų yra kiekvienoje temoje.
Originalus šaltinis - atsisiuntimas
Naršymo patarimai / konsultacijos:
- 50+ „CSS“ skirtukų pagrindu pagrįsti navigacijos scenarijai
- Breadcrumb navigacijos geriausia praktika ir pavyzdžiai
- Mobiliosios navigacijos kūrimas su jQuery
- Kodavimas Breadcrumb navigacija CSS3
- Navigacijos projektavimas naudojant „LESS CSS“
Švaresnės žiniatinklio formos
Šiuolaikinis interneto amžius toli gražu nėra statiškas susitikimas. Vartotojai nuolat keičiasi informacija ir kasdien bendrauja tarpusavyje. Dauguma šio teksto ir žiniasklaidos bendrinimo yra valdomi per žiniatinklio formas.
Turėtume pažvelgti tik į keletą pavyzdžių, kaip galite sukurti švarius vaizdus ir mygtukus. Jūsų elementų dizainas gali būti ilgas, kad jūsų lankytojai būtų iš tikrųjų naudojami. Ir tai savo ruožtu sukuria jūsų svetainės patikimumą ir suteikia daugiau puslapių peržiūrų.
Prisijungimo laukai
Yra keletas puikių prisijungimo formų PSD pavyzdžių, kuriuos galite patikrinti. Šis prisijungimas nemokamas WP mokslininkas turi visus jūsų standartinius elementus. Du įvesties laukai prisijungimui / slaptažodžiui, pateikimo mygtukas ir žymės langeliai sesijos slapukų tvarkymui.
Šis dizaino modelis yra puikus, jei jūs galite įgyvendinti efektus per jQuery. Viršutiniame dešiniajame rodyklės galvute jūs galvojate apie iššokantį langą. Tai puiki technika, leidžianti sutaupyti vietos jūsų svetainėje, išlaikant paslėptą formą, kol vartotojas nepaspaudžia registracijos nuorodos.
Originalus šaltinis - atsisiuntimas
Toliau pateiktoje formoje galite nemokamai atsisiųsti dizainerio Gil Huybrecht. Jis naudojo panašų modelį su grūdėta fone ir popieriaus tekstūra. Man ypač patinka „Gil“ dizainas yra „negabaritiniai“ elementai. Tai daug draugiškesnis nusileidimas į prisijungimo formą, kuri užpildo visą puslapį. Vartotojai gali lengvai matyti, ką jie rašo ir yra mažiau klaidų.
Originalus šaltinis - atsisiuntimas
Jei esate patyręs kaip „Frontend“ kūrėjas, naudodamas CSS3, tai labai paprasta išversti šį grafiką į kodą. Jūs netgi galite įgyvendinti pasirinktą išorinį švytėjimo efektą ir apvalius kampus mygtukui ir įvesties laukams.
Kontaktai
Kita forma, kurią rasite beveik kiekvienoje svetainėje, yra kontaktinė forma. Paprastai į jį bus įtraukti siuntėjo vardo, el. Pašto ir pranešimų turinio laukai.
Žemiau pateikiamas nemokamų žodžių pavyzdys yra puikus pavyzdys, kaip naudoti pritaikytas tekstūras ir piktogramas.
Taip pat naudojamas dizainas vietos žymeklio tekstas vietoj etikečių. Tai reiškia, kad pirmą kartą įkeliant formą kiekvienas laukas nustatomas pagal numatytąją vertę (pvz., Jūsų vardą). Bet tada, kai pradėsite rašyti vietos žymeklį, jo turinys bus rodomas. Visi standartai atitinkančios naršyklės palaikys šį efektą ir gali sutaupyti šiek tiek vietos puslapyje.
Originalus šaltinis - atsisiuntimas
Kitas nuostabus nemokamą dovanėlę, kad patraukti yra tai skirtukų forma, sukurta talentingų Jonno Riekwel. Šis dizainas yra daug paprastesnis ir pasižymi kiekvienos įvesties žymomis. Tai puikus sprendimas didesnėms įmonėms ar pradedantiesiems, kuriems reikia siųsti pranešimus per įvairius įmonės padalinius.
Originalus šaltinis - atsisiuntimas
Kontaktų formų pamokos:
- Prisijungimo / registracijos forma: idėjos ir gražūs pavyzdžiai
- Sukurkite „Stacked-paper Effect“ registracijos formą
- Sukurti „Ajax“ pagrįstą HTML5 / CSS3 kontaktinę formą
Kaspinai ir baneriai
Prieš 6 ar 7 metus suapvalinti kampai pradėjo populiarėti populiariose dizaino tendencijose. Dabar atėjome dar toliau, kai yra šešėliai ir kampinės juostelės.
Originalus šaltinis - atsisiuntimas
Kai kurie iš šių elementų gali būti naudojami kaip dizaino akcentai, pvz., Komentarų skaitiklis arba tinklaraščio paskelbimo data. Viršuje dygsniuotos juostelės puikiai tinka portfeliams ar projekto puslapiams, kuriuose norite užfiksuoti lankytojo dėmesį. Taip pat galite išbandyti panašią vertikalią juostą, kurioje dizainas nukrenta iš viršaus.
Šie nedideli puslapių efektai yra labai toli, kad pagerintumėte savo išdėstymą. Lankytojai atkreipia dėmesį į šiuos estetinius malonumus. Tačiau manau, kad mažos kampinės juostelės yra tik šios dizaino tendencijos dalis.
Originalus šaltinis - atsisiuntimas
Be to, pilnas reklaminių antraščių dizainas tapo nepaprastai populiarus kuriant prekės ženklo pripažinimą. Juos galite naudoti savo logotipe, navigacijoje, pagrindiniame puslapyje arba netgi tinklaraščio įrašuose. Poveikis praktiškai yra neribotas su gerais dizaino pajėgumais.
Kampo įvyniojimas
Kitas labai specifinis juostelės reklaminis efektas atliekamas apvyniavus dizainą aplink jūsų puslapio kampą. Tai sukuria jūsų puslapio iliuziją, kuri yra 3-D, o juosta yra apvyniota viršutinėje jūsų svetainės dalyje.
Žemiau pateiktas dizainas yra 100% nemokama, ir jį galima naudoti savo projekto idėjoms. Jūs galite pamatyti, kaip tai atkreiptų lankytojų dėmesį ir kodėl ši tendencija išaugo į tokį nerimą. Būkite atsargūs, kad nebūtų pernelyg dideli baneriai. Nesupakuoti jie gali labai erzina, kaip ir senesni „web 2.0“ blizgantys / atspindintys efektai.
Originalus šaltinis - atsisiuntimas
Projektavimas su mygtukais
Be hipersaitų, lankytojai gaus didžiausią sąveiką su mygtukais. Šie puslapių elementai gali atlikti bet kokius veiksmus su „jQuery“ ir „Ajax“ skambučiais, išskyrus tuos mygtukus, kurie susieti su statiniu turiniu, pvz.!
Žemiau pateiktas UI rinkinys, sukurtas Matt Gentile turi daug daugiau nei mygtukų. Jo PSD rinkinys yra fantastinis pradedantiesiems, norintiems pasiimti gradientus ir tekstūras, kad būtų galima statyti panašias formas. Dažnai UI rinkiniuose rasite daug aukštesnės kokybės mygtukus, nei su vienaskaitos PSD.
Originalus šaltinis - atsisiuntimas
Kaip sukurti variantus
Kaip jūs praleidžiate laiką praktikuodami šiuos metodus, laikui bėgant norite sukurti daug įvairių stilių. Tai gali sukelti panašių mygtukų perjungimą tarp skirtingų projektų ir maketų. Geras pavyzdys - dizainerio siūlomi pieniški mygtukai Robert van Klinken.
Originalus šaltinis - atsisiuntimas
Kiekvienas iš trijų originalių mygtukų turi skirtingą gradiento stilių, išskyrus judančias ir aktyvias būsenas, kurios atrodo panašios. Dirbdami „Photoshop“ turite suderinti spalvas tarp gradientų arba perkelti spalvas į efektų sluoksnį. Su šiuo supratimu jūs netgi galite sukurti savo mygtukus, skirtus parsisiųsti!
Originalus šaltinis - atsisiuntimas
Mediena + popieriaus tekstūros
Kai jums reikia pagyvinti savo pagrindinius maketuotus dizainus, tuomet turėsite pereiti prie gudresnių metodų. Tekstūros visada laukiamos, jei galite jas tinkamai įgyvendinti per CSS foną arba nustatytą plotį. Ir dvi iš populiariausių tekstūrų, kurias mačiau, yra medienos ir tuščių popierių.
Notepad idėja yra tikrai paprasta, tačiau ji gali tapti vėsiu prekės ženklo dizainu arba kaip vartotojo sąsajos elemento dalis, arba integruota į visą jūsų išdėstymą. Tačiau popierius ne visada atrodo pats geriausias, o kita tekstūra gali padėti stiliams įsilieti. Čia gali būti pateikiamos detalesnės medienos tekstūros.
Originalus šaltinis - atsisiuntimas
Vaizdai išsiskiria ir atrodo nuostabūs, suvynioti į išorinį apvalkalą. Visa tekstūros samprata yra suteikti jūsų svetainei tam tikrą jausmą ar emocijas. Medienos temos gali sukelti namų ir gamtos jausmą. Yra net nuostabus medinis interneto sąsajos rinkinys, kurį gali atsisiųsti iš Jeremiah Wingett. Jei jaučiatės kūrybingi, pabandykite sujungti kai kurias savo tekstūras ir pamatyti, kaip jie veikia interneto aplinkoje.
28 Aukštos raiškos medienos tekstūros
Išvada
Geriausi interneto dizaineriai yra tie, kurie kasdien praktikuoja ir niekada neleidžia savo nesėkmėms atgrasyti nuo jų galutinių tikslų. Jūs turite būti jautrūs ir greitai sugrįžti iš sėkmingų ir nesėkmingų bandymų. Šiame vadove pateikiami patarimai ir nemokami patarimai turėtų būti geras atspirties taškas pradėti mokytis, kaip kurti skirtingus tinklalapio koncepcijas interneto projektui. Ir mes norėtume perskaityti jūsų mintis apie šį klausimą pokalbio srityje.
