Killerin Web-käyttöliittymien suunnittelu Freebies - Ultimate Guide -ohjelmalla

Verkkosuunnittelun ala on omaksunut oman henkensä vain muutamassa vuodessa. Maailmassa on nykyään aktiivisempia suunnittelijoita kuin koskaan aikaisemmin, ja ne kaikki tekevät yhteistyötä innovatiivisten projektien ideoiden parissa. Monien näiden trendien taustalla olevat käsitteet on kehitetty ammattimaisten graafisten suunnittelijoiden kautta.

Voi kestää kuukausia tai jopa vuosia, ennen kuin ymmärrät täysin käyttöliittymän rakentamisen tekniset ominaisuudet. Sinun täytyy harkita sivuelementtien kokoja ja sijoittelua, myös tekstin ja tarrojen luettavuutta. Vähäisellä vapaa-ajalla voit kaivaa minimalistiseen lähestymistapaan sivustojen rakentamiseen vähemmän ja vähentää sekaannusta. Ja jopa silloin on olemassa myös kymmeniä muita suunnittelutekniikoita.

Tähän oppaaseen on yhdistetty joitakin nykyaikaisen käyttöliittymän suunnittelutekniikat kanssa voit ladata ilmaistarjouksia ja pelata. Toivon, että tämä tarjoaa jonkinlaista motivaatiota niille, jotka ovat kiinnostuneita grafiikan / web-suunnittelun urasta. Jopa ammattimaiset web-suunnittelijat saattavat löytää muutamia näistä suuntauksista hyödyllisiksi seuraavaan projektiin.

Harjoittele koko mallilla

Kun sinulla on taitoja suunnitella oma ulkoasu tyhjästä, ei tarvitse aloittaa malleja. Aloittelijat puolestaan ​​saattavat tuntea olonsa mukavammiksi alkaen täydellisestä suunnittelusta ja työskentelystä hienompiin yksityiskohtiin.

Portfolioihin, kotisivuihin, blogeihin ja moniin muihin luokkiin on saatavana erinomaisia ​​maksuttomia PSD-verkkosivustomalleja. Nämä ovat täydellisiä malleja, joiden avulla pääset tutustumaan a “yleinen” web-asettelu. Jokaisella verkkosivustolla on erilaiset tarpeet sivuelementeille, ja sinun on määritettävä, mitkä kohteet ovat tärkeitä.

Tässä on PSD-esimerkki nimeltä "AppCivilization", jonka on suunnitellut Martin Fabricius. Ulkoasu on esillä luovassa studiossa, joka suunnittelee mobiilisovelluksia ja mahdollisesti sivustoja. Alhaalta löydät pienen paneelin sovelluskuvakkeista, jotka näytetään salkussa. Huomaa myös, että koko muotoilu on rikki horisontaalisesti otsikkoon, ylhäältä kuvaesitykseen, pääsisältöön ja tummennetun alatunnisteen.

Alkuperäinen lähde - Lataa

Aloitussivujen suunnittelu

Katsotaanpa toista freebieä, jonka myös Martin on suunnitellut. Tämä seuraava esimerkki on aloitussivu, jota voit käyttää minkä tahansa tuotteen myymiseen. Yleensä nämä ovat digitaalisia tavaroita, jotka käyttäjä voi ladata eli sovelluksia, valokuvia, kuvakkeita, malleja jne..

Alkuperäinen lähde - Lataa

Mutta hänen suunnittelunsa paras osa on, että se on hyvin joustava aloittelijoille. Otsikko käyttää edelleen pientä suurta navigointia, jossa on suuri kuva, mutta erityisesti odotetut käyttäjän toimet ovat erilaisia. Hänellä on iso “Osta se!” -painike, joka erottuu suoraan taittuman yläpuolelta. Tuotteen aloitussivulla tämä kiinnittäisi enemmän huomiota kuin jQuery-diaesitys.

Toinen suuri käyttöliittymän tekniikka on pieni iPhone-ominaisuus, joka näyttää sivun puolivälissä. Martinissa on iPhone-esikatselukuva, App Store -painike ja pieni luettelo tärkeimmistä ominaisuuksista. Kun kävijät etsivät tuotetietoja, et voi tehdä asioita yksinkertaisemmiksi kuin alustetun luettelon kautta.

Lisää malleja:

Tässä muutamia ilmaisia ​​PSD-malleja, jotka julkaistiin passissa:

• "BiZ" Business Website PSD -mallit
• "ThinkJuice" -tuotepaikan PSD-malli
• Ammatillisen yrityspisteen PSD-malli
• "Polo360" Portfolio Site PSD -malli

Saatat myös olla kiinnostunut seuraavista:

• Yrityksen verkkosivustomallit
• "Tulossa pian" sivun opetusohjelmat + mallit

Pääsivuston navigointi

Valikot ja painikkeet ovat vain työkaluja paljon suurempien sivuelementtien rakentamiseen. Ei ole kiistetty, että sivustosi tärkein navigointi on erittäin tärkeä. Sinun tarvitsee sitä, jotta sivustosi olisi helposti saatavilla mahdollisilla varamenetelmillä mobiilikäyttäjille.

Alla on viileä navigointipalkki, jossa on ommelkoostumus. Korostustyyli voidaan esittää pimeänä laatikkona tai sivun sisältöön suuntautuvana alasuuntaisena kärjenä. Tämä tyyli on ollut merkittävä vuosien varrella ja näyttää hyvältä oikeassa asetuksessa.

Alkuperäinen lähde - Lataa

Toinen samanlainen ilmaistarjous on tämän suunnitteleman teksturoidun otsikon navigointi Edi Gil. Pidän todella siitä, miten tämä toinen navbar sisältää sekä linkkiluettelon että muutamia lisäsivupainikkeita. Haluat tarjota toissijaisia ​​linkkejä kävijöille, joissa he voivat löytää profiileja Webissä.

Alkuperäinen lähde - Lataa

Vaihtoehtoiset valikkotyylit

Tyypillisen horisontaalisen navigointipalkin ohella on myös muita suunnitteluvaihtoehtoja. Vertikaaliset linkit voidaan jakaa eri alaotsikoihin, jotka jättävät enemmän tilaa sivun sisällölle.

Otetaan esimerkiksi valikko freebie alla suunnitellut verkkosivuilla Icojam.

Kukin otsikko on rakennettu laajentamaan ja romahtamaan valitun objektin perusteella. Lisäksi muotoilu mahdollistaa pienen numerolaskurin istua kunkin luokan oikealle puolelle. Tämä täyttäisi parhaiten blogin navigoinnin, jotta voit laskea, kuinka monta viestiä jokaisen aiheen alla on.

Alkuperäinen lähde - Lataa

Navigointivihjeet / Oppaat:

• 50 + puhdas CSS-välilehdellä perustuva navigointiskripti
• Breadcrumb-navigoinnin parhaat käytännöt ja esimerkit
• Mobiilinavigaation rakentaminen jQueryn avulla
• Koodaus Breadcrumb-navigointi CSS3: ssa
• Navigoinnin suunnittelu LESS CSS: llä

Puhtaat Web-lomakkeet

Internetin nykyaikainen ikä on kaukana staattisesta kohtaamispaikasta. Käyttäjät jakavat jatkuvasti tietoa ja vuorovaikutuksessa keskenään päivittäin. Suurinta osaa tästä tekstistä ja median jakamisesta hallitaan web-lomakkeiden kautta.

Meidän on tarkasteltava vain muutamia esimerkkejä siitä, miten voit suunnitella puhtaita muotoja ja painikkeita. Elementtien suunnittelu voi mennä pitkälle kohti kutsumalla kävijöitä todella käyttämään niitä. Ja tämä puolestaan ​​rakentaa sivustosi uskottavuutta ja lisää sivun näyttökertoja.

Kirjautuminen -kentät

On olemassa muutamia suuria esimerkkejä kirjautumislomakkeesta PSD: t tarkistaakseen. Tämä sisäänkirjautumisvapaus kautta WP tutkija on kaikki vakioelementit. Kaksi syöttökenttää kirjautumiseen / salasanaan, lähetyspainike ja valintaruudut istunnon evästeiden hallintaan.

Tämä malli on täydellinen, jos voit toteuttaa vaikutukset jQueryn kautta. Oikeanpuoleinen oikeanpuoleinen nuoli antaa sinulle ajatuksen ponnahdusikkunoiden ikkunan asetuksista. Tämä on ihana tekniikka, jolla voit säästää tilaa sivustossasi pitämällä lomakkeen piilotettuna, kunnes käyttäjä napsauttaa rekisteröintilinkkiä.

Alkuperäinen lähde - Lataa

Alla oleva lomake on vapaasti ladattavissa suunnittelijan ansiosta Gil Huybrecht. Hän käytti samanlaista kuviota, jossa oli rakeinen tausta ja paperin rakenne. Erityisesti pidän Gilin suunnittelusta "ylimitoitettuja" elementtejä. Se on paljon ystävällisempi lasku kirjautumislomakkeelle, joka täyttää koko sivun. Käyttäjät voivat helposti nähdä, mitä he kirjoittavat, ja on vähemmän sotkua.

Alkuperäinen lähde - Lataa

Jos olet kokenut frontend-kehittäjänä CSS3: n avulla, tämä on erittäin helppo kääntää koodiksi. Voit jopa toteuttaa valitun ulomman hehkutusvaikutuksen ja pyöristetyt kulmat painikkeelle ja syöttökentille.

Yhteydet

Toinen lomake, joka löytyy lähes jokaisesta sivustosta, on yhteydenottolomake. Tämä sisältää tavallisesti lähettäjän nimen, sähköpostin ja viestin sisällön kentät.

Alla oleva ilmaistarjous on mahtava esimerkki mukautettujen kuvioiden ja kuvakkeiden käytöstä.

Suunnittelu käyttää myös paikanvaraajan teksti etikettien sijaan. Tämä tarkoittaa sitä, että kun lomake lataa ensimmäistä kertaa, jokainen kenttä asetetaan oletusarvoon (esim. Nimesi). Mutta sitten kun aloitat kirjoittamisen, paikanvaraus tyhjentää ja sisältösi näytetään sen sijaan. Kaikki standardien mukaiset selaimet tukevat tätä vaikutusta ja voivat säästää jonkin verran tilaa sivulla.

Alkuperäinen lähde - Lataa

Toinen loistava ilmaistarjous, joka napataan, on lahjakkaiden suunnittelema välilehti Jonno Riekwel. Tämä muotoilu on paljon yksinkertaisempi ja sisältää tunnisteita kunkin tulon yläpuolella. Tämä on erinomainen ratkaisu suurille yrityksille tai aloittelijoille, joiden on lähetettävä viestejä yrityksen eri osastojen kautta.

Alkuperäinen lähde - Lataa

Yhteydenottomuotojen opetusohjelmat:

• Sisäänkirjautuminen / rekisteröintilomake: Ideat ja kauniit esimerkit
• Luo pinottu paperi-vaikutuksen kirjautumislomake
• Luo Ajax-pohjainen HTML5 / CSS3-yhteyslomake

Nauhat ja bannerit

Vain 6 tai 7 vuotta sitten pyöristetyt kulmat alkoivat nousta suosittujen muotoilusuunnitelmien myötä. Nyt olemme tulleet vielä pidemmälle varjossa ja kulmahihnoilla.

Alkuperäinen lähde - Lataa

Joitakin näistä elementeistä voidaan käyttää suunnittelun kohokohtina, kuten kommenttilaskurina tai blogin julkaisupäivänä. Yllä oleva ommeltu nauha sopii erinomaisesti salkkuille tai projektisivuille, joihin haluat kiinnittää kävijän huomion. Voit myös kokeilla samanlaista pystysuoraa nauhaa, jossa muotoilu putoaa ylhäältä.

Nämä pienet sivuvaikutukset parantavat ulkoasua. Vierailijat ottavat huomion ja rakastavat näitä esteettisiä miellyttävyyksiä. Pitäkää kuitenkin sitä, että pienet kulmakarvat ovat vain osa tätä suunnittelusuunnittelua.

Alkuperäinen lähde - Lataa

Lisäksi täysipainoiset bannerimallit ovat tulleet uskomattoman suosituiksi brändin tunnustamisen rakentamisessa. Voit käyttää niitä logossa, navigoinnissa, kotisivulla tai jopa esillä olevissa blogikirjeissä. Vaikutukset ovat käytännöllisesti katsoen rajattomat ja hyvät suunnittelumahdollisuudet.

Cornerin kääriminen

Toinen hyvin spesifinen nauha-banneriefekti suoritetaan käärimällä muotoilu sivun kulman ympärille. Tämä rakentaa sivusi illuusion, joka on 3-D ja nauha on kääritty verkkosivustosi yläosaan.

Alla oleva malli on 100% ilmaiseksi ladattavissa ja sitä voidaan käyttää omien projektisiideoiden tekemiseen. Näet, miten tämä kiinnittäisi kävijöiden huomion ja miksi tämä suuntaus on kasvanut niin vimmaiseksi. Varo liikuttamasta bannerit. Suurina, nämä voivat saada hyvin ärsyttävää kuin vanhemmat "web 2.0" -kiiltävät / peilatut vaikutukset.

Alkuperäinen lähde - Lataa

Suunnittelu painikkeilla

Hyperlinkkien ohella saat eniten vuorovaikutusta kävijöiden kanssa painikkeilla. Nämä sivut voivat tehdä mitään jQuery- ja Ajax-puhelujen avulla, paitsi että voit käyttää myös painikkeita staattiseen sisältöön, kuten ilmaispalvelun lataamiseen.!

Alla oleva UI-paketti, jonka on suunnitellut Matt Gentile on paljon enemmän kuin vain painikkeet. Hänen PSD-sarja on fantastinen aloittelijoille, jotka haluavat poimia kaltevuudet ja tekstuurit vastaavien muotojen rakentamiseen. Usein löydät paljon laadukkaampia painikkeita UI-sarjoissa kuin yksittäisissä PSD-laitteissa.

Alkuperäinen lähde - Lataa

Miten luoda muunnelmia

Kun käytät aikaa harjoitella näitä tekniikoita, haluat luoda monia eri tyylejä ajan myötä. Tämä voi johtaa samankaltaisten painikkeiden vaihtamiseen eri projektien ja ulkoasujen välillä. Hyvä esimerkki on suunnittelijan tarjoamat maitomaiset painikkeet Robert van Klinken.

Alkuperäinen lähde - Lataa

Jokaisella alkuperäisellä kolmella painikkeella on erilainen gradienttityyppi, paitsi hover ja aktiiviset tilat, jotka näyttävät samankaltaisilta. Kun työskentelet Photoshopissa, sinun on sovitettava värit gradienttien väliin tai siirrettävä värejä tehokerrokseen. Tämän ymmärryksen avulla voit jopa rakentaa omia painikkeita ilmaistarjouksia varten ladattavaksi!

Alkuperäinen lähde - Lataa

Puu + paperirakenteet

Kun sinun täytyy spice up your perusasettelu malleja sitten sinun täytyy siirtyä kohti enemmän karkea menetelmiä. Tekstuurit ovat aina tervetulleita, jos voit toteuttaa ne oikein CSS-taustojen tai asetetun leveyden sisällön kautta. Ja kaksi niistä suosituimmista kuvioista, joita olen nähnyt, ovat puuta ja tyhjiä papereita.

Notepad-idea on todella yksinkertainen, mutta se voi toimia viileänä tuotemerkkinä joko osana käyttöliittymäelementtiä tai rakentaa koko ulkoasuun. Mutta paperi ei aina näytä parhaimmillaan itsestään, ja toinen rakenne voi auttaa tyylejä sulautumaan. Siitä voi tulla yksityiskohtaisempia puun kuvioita.

Alkuperäinen lähde - Lataa

Kuvat erottuvat ja näyttävät upeilta käärittyinä ulkokuoreen. Koko konseptin rakenne on antaa sivustollesi erityinen tunne tai tunne. Puun teemat voivat herättää kodin ja luonnon tunteen. Jeremiah Wingett voi ladata jopa mahtavan puisen web-käyttöliittymän. Jos sinusta tuntuu luovalta, yritä koota joitakin omia kuvioita ja nähdä, miten ne toimivat web-pohjaisessa ympäristössä.

28 Korkean resoluution puun tekstuurit

johtopäätös

Parhaat web-suunnittelijat ovat niitä, jotka harjoittavat päivittäin ja eivät koskaan anna heidän epäonnistumisensa estää niiden lopullisia tavoitteita. Sinun täytyy olla reagoiva ja palautua nopeasti sekä onnistumisesta että epäonnistuneista yrityksistä. Tässä oppaassa olevat vinkit ja ilmaisut pitäisi olla hyvä lähtökohta oppia, miten rakennetaan web-projektin eri sivukonsepteja. Ja haluaisimme lukea ajatuksesi asiasta keskustelun jälkeen.