25 Esimerkkejä Web 2.0: sta ja perinteisestä muotoilusta

Suunnittelun suuressa laajuudessa termi "Web 2.0" on suhteellisen uusi.

Se tuo mukanaan omat standardinsa, jotkut vahvat, toiset eivät ole niin vahvoja, koska Web 2.0 itsessään on hyvin muuttuva, jatkuvasti kehittyvä suunnittelustandardien määrittely .

Lukemattomat esimerkit Web 2.0 -sivustoista ovat rikko- neet sääntöjä, joita pidettiin kerrankin vahvoina suunnitelmina.

Toisaalta monissa tapauksissa Web 2.0 on vahvistanut yhteisiä muotoilun väärinkäytöksiä; se keskittyy käytettävyyteen, käyttöliittymään ja luettavuuteen .

Parhaimmillaan Web 2.0 on samanlainen kuin vuosisatojen perinteiset suunnittelusäännöt, vaikka se on epäilemättä heijastus yhteiskunnassamme nykytilanteessa hälinässä.

Tässä on kokoelma 25 sivustoa, jotka osoittavat, miten Web 2.0 ja perinteiset suunnittelukäytännöt voivat yhdessä muodostaa todella upeita verkkosivustoja.

1. Pixel-matriisisuunnittelu

Josh Pyles on mukava kaveri, ja hän on myös fantastinen, kurinalaista suunnittelija. Hänen viimeisin iteraatio Pixel Matrix on hämmästyttävä, ja tekee erityisen hyvää käyttöä väriä ja vahva verkkoon järjestelmä. Selaa yli hänen portfolio ja näet, että hän harjoittaa tätä käytäntöä hänen asiakkaan työtä.

Jos näet "Tietoja" -sivun (kun huomaat mukavan välilehden järjestelmästä), voit nähdä, että Josh on sisällyttänyt mukavan kuvan työtilaansa.

Tämän kuvan alla on erinomainen tasapaino Web 2.0 -tyylisillä fonteilla, jotka luovat erittäin vahvan tiedon hierarkian. Hän pitää omaa biopiensä pienenä ja sijoittaa sivupalkkiin ja tasapainottaa sisällön alueen suuremman tekstin pienemmällä ja hienostuneella tavalla sivupalkissa.

Perinteiset näkökohdat:

Suuri verkkojärjestelmä.
Ihana väriteoria
Vahva tiedon hierarkia

Web 2.0 -parannukset:

Kauniit kaltevuudet.
Hienot yksityiskohdat.
Suuret, hyvin luettavat fonttivalinnat.
Paljon tapoja pysytellä yhteydessä.
Jopa yhteydenottolomakkeella on mukava toteutus pyöristetyt kulmat!

2. MuttInk

Viime aikoina tekstuuri näyttää olevan suurin asia kuin pyöristetyt kulmat, ja vaikka MuttInkin sivustoa ei ehkä luokitella tyypilliseksi Web 2.0: ksi, on vain yksi katsaus, joka edellyttää, että Jeremy Holmes (työn takana oleva mies) on hämmästyttävä suunnittelija ja graafikko .

Huomiota yksityiskohtiin, tekstuuriin ja vahvaan henkilöllisyyteen sijoitetaan tämä henkilökohtaiseksi faveksi.

Vaikka liian monimutkaiset värit ovat jonkin verran takanamme (mikä on mielestäni hyvä asia), olen edelleen faneja hienoista, maanläheisistä sävyistä, joita täydennetään kirkkailla aksentilla ja MuttInk on vetänyt tämän loistavasti .

Turkoosi yläpuolella beige todella ponnahtaa, ja ylläpitää "laatimispöytä" tuntuu, että läpäisee sivuston. Ja vaikka tyyppi on pienellä puolella, ja vähän vaikea lukea pisteitä, se silti näyttää hyvältä sivulta.

Perinteiset näkökohdat:

Erittäin tarkka yksityiskohtien huomio.
Nice tyyppi (ehkä ehkä liian pieni).
Suuri brändi-identiteetti.
Suuri tila-apu, erityisesti salkun sivuilla.

Web 2.0 -parannukset:

Suuri käyttö tekstuurin.
Suuret, ammattimaiset kuvat esittelevät työtä.
Nopea pääsy sosiaalisiin linkkeihin.

3. 45 Royale

Portfolio yli 45 Royale ei vain esittelee hämmästyttävää työtä, mutta se osoittaa, että tiimi takana sivuston ymmärtää hyvä käyttää useita suunnittelun standardeja. Se on fantastinen yhdistelmä Web 2.0 -vastuuvuista, mutta sillä on vankka perusta perinteisissä suunnittelustandardeissa (ja katso vain näitä värejä!).

Erityisesti 45 Royale on yksi parhaimmista verkkojärjestelmistä, joita olen nähnyt viime aikoina, ja kuvat, jotka he ovat valinneet esittelemään työt, todella hyvät silmänsä kanssa fluoresoivalla värillisellä otsikolla.

Värimallin ja organisaatioverkon näkeminen niin suurella harmonialla on aina hauska, ja ne ovat täydentäneet sitä erittäin hienostuneella fonttien, sekä suurilla että pienillä fontilla.

Kirkkaat värit, jotka ympäröivät toissijaista palettia harmaasta, valkoisesta ja mustasta? Mahtava.

Perinteiset näkökohdat:

Yksi parhaista esimerkkeistä ruudukkojärjestelmästä.
Runsaasti välilyöntiä ja hengitystilaa.
Loistava värivalinta.
Hyvä tiedonvaihto.

Web 2.0 -parannukset:

Värit yksinkertaisesti laulavat ... niin paljon, että luetin sen molemmissa luokissa.
Jumbo-kokoinen tyyppi on erittäin luettavissa, mutta tyylikäs.
Suuri kuva- ja grafiikan käyttö.
Monia hankkeita on hyvin järjestetty ja kauniisti esillä.

4. Purista zoomaus

Olen sucker suuri kuva, varsinkin kun se esitetään ylpeillä upea esimerkki valkoisesta tilasta. Rakastan tätä sivustoa niin paljon, että yksinkertaisesti klikkaamalla salkun läpi on räjähdys. Suuri välilyönti, suuri verkkojärjestelmä ja upea JavaScript-käyttö; näillä asioilla on tapa puhua minulle (kyllä, olen tietokoneen edessä melko paljon).

Tärkeä asia pitää mielessä, kun kohtaamme monia käytettävissä olevia tekniikoita, varsinkin JavaScriptin mahdollistamien fancy-haalistumien ja temputtamisen avulla, on kaventaa niitä ja hallita niitä.

Muistatko myöhään yhdeksänkymmentäluvun, kun Flash oli raivoa? Muistatko kuinka masentunut Flashista me kaikki saimme myöhemmin? Hyvä Web 2.0 -standardit ovat yhtä paljon kurinalaisuudesta kuin suunnittelusta, ja Pinch Zoomilla on se hyvin hallinnassa.

He ripottele sivustonsa fancy goodness, mutta pitää se laiha ja hauska, lähes nolla aikaa odottaa kuvia.

Perinteiset näkökohdat:

Toinen suuri verkkojärjestelmä (nähdä kuvio täällä?).
Mustalla valkoisella ei koskaan näytä vanhentuneen.
Kirjasinten ja otsikoiden tasapainoinen tasapaino. (Pieni fontti, joskin luettavissa, saattaa olla pistekoko tai kaksi suurempaa).

Web 2.0 -parannukset:

JavaScript-portfolion liukusäädin on hauskaa ja tehokasta.
Liitäntä on minimalistinen ja suora.
Monipuolinen kuvankäyttö on hieno kosketus.
Kattaa verkon nykyteknologia joutumatta hankaliksi.
Ainutlaatuiset ratkaisut sivun asetteluun (Tutustu mega-pudotukseen, kun napsautat info-välilehteä. Siellä on käytännössä koko sivusto, joka piilotetaan sinne!).

5. Cameron Moll

Olen aina ollut fani Cameronin työtä, ja kuten voitte sanoa, hän taipuu pysymään perinteisen puolen suunnittelun pelikentällä. Vaikka hänen blogisivustonsä tavoittelee perinteisen sivun hienostuneesta suunnittelusta ja pienistä kirjasimista, ei ole kieltävä hänen salkkussivunsa eleganssia ja kauneutta, mikä on fantastinen tasapaino uudesta ja perinteisestä.

Värit ovat eloisat ja fontin valinnat ovat silmät yleisen tunnelman kanssa, mutta taas tyyppi voi saada melko pieniä paikoissa, mikä on Web 2.0 no-no. Mutta kuka minä olen? Cameron on löytänyt suuren menestyksen ja on Authenticjobs.com-sivuston takana, erinomainen resurssi suunnittelijoille (ja yksi, joka on auttanut maksamaan laskut).

Perinteiset näkökohdat:

Hyvin jäsennelty sisältö.
Pienet värit vaihtelevat mukavasti.
Tyyppi näyttää tyylikkäältä, mutta taipuu ratsastaa taajuuden pienellä puolella. Silloinkin se on luettavissa ja näyttää hyvältä.

Web 2.0 -parannukset:

Erittäin mukava tekstuurin käyttö.
Portfolio sisältää hienoja kuvia töistä, jotka ovat hyvin suoraviivaisia ja helppokäyttöisiä.

6. Metalabin "Fluid" Tumblr-teema

Ainoa Tumblr-teema luettelon tekemiseksi on nimeltään "Fluid", jonka Metalab design. Se teki luettelon yksinkertaisen syyn takia: se on kummallinen kaunis esimerkki Web 2.0: sta parhaimmillaan. Yksinkertainen, puhdas ja hehkuva väri.

Tätä vertailua voidaan pitää hieman yksipuolisena (se on Web 2.0 catch-all). Tämä johtuu siitä, että Metalab tunnetaan asettamasta standardeja Web 2.0 -alueella, ja tämä sivusto tukee tätä tosiasiaa. Metalab Design pitää kuitenkin perustavanlaatuiset säännöt mielessä ja pitää rakenteen yksinkertaisena ja hyvin järjestäytyneenä.

Läpinäkyvyys ja päällekkäiset grafiikat ovat yksi Web 2.0: n uudemmista suuntauksista. Ne antavat sivustolle suuren syvyyden ja antavat leikkuualueen, lähes futuristisen ilmeen. Metalabin "Fluid" on omaksunut tämän käsitteen ja, vielä paremmin, se toimitti massat ladattavaksi teemaksi.

Perinteiset näkökohdat:

Yksinkertainen, tehokas rakenne.
Seisoo Tumblr-teemojen massat.
Nykyaikainen (vaikka yksinkertainen) värimaailma.

Web 2.0 -parannukset:

Suuri, vilkas valokuvaus.
Ups ante for huippunopea Web 2.0 -suunnittelu
Erittäin luettavat fontit ja otsikot.
Pyöristettyjen kulmien ja kaltevuuksien käyttö viedään äärimmäisyyteen, mutta ne esitetään hauska, moderni Web 2.0 -ratkaisu.
Kuvakkeet ovat loistava, minimalistinen tapa navigoida kunkin viestin vaihtoehdot.
Älkäämme unohtako läpinäkyviä taustoja!

7. Viget

Voi poika. Tämä sivusto. Se saa minut joka kerta. Toki olen pehmeä tekstuuri, mutta tämä suunnittelija on myös kiinni hyvän värin teorian ja hierarkian hienovaraisuudesta.

Tarkoitan vain niitä muotokuvia lähellä pohjaa! He ovat silmiinpistäviä, mutta he eivät kilpaile siitä, mikä voisi olla hyvin monimutkainen suunnitteluvirta. Älkäämme unohtako suuria kirjasimen valintoja ja vesivärejä. Kakkujen jäätyminen on se, että vaikka sivusto on kuvaruudullinen, se latautuu nopeasti!

Toinen tämän sivun viileä piirre on, että suunnittelijat haluavat jakaa paljon tietoa yhteisössään, eivätkä ne ole tietoja, jotka myyvät niitä suunnittelijoina, vaan tiedot, joita he tuntevat tyypillisiltä käyttäjiltä, voivat olla arvokkaita.

Niiden avulla voit kaivata syvemmälle ilman, että tarvitset niitä kurkkuun, mikä on aina tervetullut käytäntö.

Perinteiset näkökohdat:

Hyvin jäsennelty sisältö.
Kaunis väri ja tyyppi.
Vaikka fontit ovat pienellä puolella, tärkein sisältö on edelleen helppo lukea.
Suuri kuvamateriaali sulautuu saumattomasti muotoiluun (viileät muotokuvat).

Web 2.0 -parannukset:

Vesiväri-teema on äärimmäisen nykyaikainen, ja vaikka se on raskas, se on suunniteltu lataamaan laiha ja keskiverto.
Sivupalkin sisältö on hyvin organisoitua ja sisällöllistä.
Ainutlaatuinen ratkaisu sivupalkin "Puhekupla" -ruutuun.
Paljon jaettua, sisältöä ohjaavaa tietoa.

8. FeelWire

Toinen hämmästyttävä esimerkki suuresta välilyönnistä on Feelwire. Musta tyyli valkoisilla taustoilla, suurilla sävyillä harmaa välillä, ei koskaan näytä vanhentuneen. Lisää pari värikkäitä kuvakkeita, ja sinulla on itsellesi yksinkertainen, mutta tehokas sivusto. Kyse on yksinkertaisuudesta tässä (heck, heillä on vain yksi sivu!).

Web 2.0 -tyyliset kuvakkeet toimivat tämän sivun keskeisenä osana, ja ne vievät paljon pitämällä sivustoa yhdessä. He myös estävät sivuston ylittyvän tekstin avulla ja antavat käyttäjälle jotain outoa.

Näiden kuvakkeiden rullaamisen jälkeen olin todella tyytyväinen siihen, mitä löysin: hyvin yksinkertainen leijuvälin tila, joka antoi minulle etsimät tiedot tekemällä näin yhä suosituimmalla Web 2.0 -puhekuplalla. Suuri kosketus.

Viimeinen asia: Vaikka pidän punaisista linkkeistä, jotka myös ponnahtaa sivulta ja toimivat vuorovaikutuksessa kuvakkeiden kanssa, mielestäni heidän pitäisi tehdä yhteydenotto hieman havaittavammaksi. Siitä lähtien se on hieman liian sisällään, ja minun täytyi etsiä tapa saada yhteyttä näihin lahjakkaisiin kehittäjiin. Kunhan sanoin'.

Perinteiset näkökohdat:

Lyhyt, makea ja kohta: yhden sivun sivusto.
Valkoinen tila!
Ohut, tyylikäs fonttivaihtoehto.
Mukava, perusasento.

Web 2.0 -parannukset:

Kiiltävät kuvakkeet ponnahtaa sivulta, hyvällä tavalla.
Ihanteeton kuvakkeiden viileä rulluus säilyttävät sivuston selkeästi, mutta antavat sinulle tarvittavat tiedot hauskalla tavalla.
Nizzat avatarit lisäävät ihmisen elementin.

9. Agami Creative

Okei, ehkä se on vain henkilökohtainen asia näillä erittäin kuvioiduilla sivustoilla, mutta mitä Agami Creative tekee, se tekee hyvin. Se on toinen ajankohtainen esimerkki siitä, miten kuva-raskas sivustoista voi tulla täysin hyväksyttävä ratkaisu nopeiden yhteyksien päivänä.

Tämän sivuston keskeinen osa on ehdottomasti akvarellin otsikko, joka toimii täydellisenä taustana viisas logo-designille. Siellä on myös navigointi, joka sijoittaa juuri sen sijainnin tarpeeksi, muttei kuitenkaan loukkaisi käyttäjää (koska useimmat ihmiset tietävät, mistä navigointi löytyy näinä päivinä.).

Kun napsautat portfoliosivulle, näet asettelun, jossa on täydellinen määrä hengitystilaa ja vahva verkkojärjestelmä.

Yksinkertaiset kuvat edistävät työtä ja vetävät silmäsi yksittäisiin projekteihin, kuten katsomalla avaimenreikää lopputulokseen. Kaikki tämä on kääritty hienostunut serif fontti otsikoita ja erittäin luettavissa sans-serif fontti kehon tekstiä.

Perinteiset näkökohdat:

Kauniimpi väriteorian käyttö.
Suuri taideteos.
Mielenkiintoinen tyypin / fonttien yhdistelmä.
Taiteellinen, käsin piirretty logo tuntee, että sitä kuljetetaan koko sivustolla.

Web 2.0 -parannukset:

Ylisuuret navigointi helpottaa sivuston liikkumista.
Ne tekevät siitä helposti yhteyden.
Avatareiden käyttö on hyvä idea (vaikka rehellisesti mielestäni he voisivat tehdä paremmin näillä. En tiedä, miten anime näyttää olevan verkossa tämän sivuston kuin aasian vaikutuksen kanssa?).
Rakastele tekstuuria!

10. Adit Shukla

Toinen sivusto, jolla on loistava havainnollistava lähestymistapa, suunnittelija Adit Shukla osaa myös rakentaa erinomaisen värimaailman ja jopa pelata mukavalla tavalla sivupalkkiin.

Joillakin outoilla syillä monet sivupalkit ovat huonoja ja unohdettuja, ikään kuin suunnittelijat saisivat luvan jättää hyvän mallin säännöt sivujen sivupalkin heittämiseen. Ei tällä sivustolla.

Vaikka sisältö on vähäinen (edes hieman harva), ei voi auttaa rakastamaan mukana olevaa luovuuteen, etenkin havainnollistavaan otsikkoon, mikä lisää tarvittavan syvyysmäärän. Yllä olevat navigointi-välilehdet ovat mukava kosketus.

Perinteiset näkökohdat:

Värikkäitä värejä.
Luova ratkaisu yhteisiin elementteihin, kuten sivupalkkiin ja otsikkoon.
Kuva lisää paljon syvyyttä.

Web 2.0 -parannukset:

Yksinkertainen asennus, jossa on hyvin kehittynyt otsikkokuva, joka sisältää myös navigoinnin.
Suuri tyyppi on tehokas.
Monta tapaa navigoida sivustossa (vaikka rehellisesti, en ole vakuuttunut siitä, että tämä on niin hyvä asia).
Läpinäkyvät välilehdet ovat mukava kosketus.

12. Kerma Scoop

Ensimmäinen asia, jonka huomaat Cream Scoopista, on rohkea valikoima värejä, joita käytetään koko sivustolla. He eivät pelkää ottaa värejä normin mukaiseen loviin, ja tulos on yhtä virkistävä kuin erilainen.

Vaikka värit ovat rohkeita, on myös hienovarainen sekoituksia, joilla on voimakasta tyyppiä ja kaltevuuksia, jotka peppered throughout the site. Huomaa, miten taustakradientti kirkastuu yläosassa, kuten valokeilan reunaa, korostamaan muuten minimaalinen navigointi. Tyyppi on hyvin järjestetty ja tasapainoinen, ja selvästi Web 2.0 tuntuu.

Perinteiset näkökohdat:

Lihavoitu valikoima värejä, mutta valinta, joka toimii yllättävän tehokkailla tavoilla.
Minimalistinen navigointi, joka saa työn.
Hyvää käyttöä leikkisä kuva.
Asettelu on rakenteeltaan hauskaa.

Web 2.0 -parannukset:

Loistava kaltevuuden käyttö taustalla.
Kirkas sininen todella tarttuu huomionne ja ohjaa sen tärkeisiin asioihin.
Avatareiden viileä käyttö noin sivulla (kuinka vanhat ovat nämä kaverit?).
Hyviä fontteja käytetään koko.

13. Hiilikuitu

Carbonica luopuu Web 2.0: n kaltevuudesta ja kiiltävästä hyvyydestä ja menee "pieced together" näytelmään, joka muistuttaa leikekirjaa. Suuri käyttö tekstuurin ja animaation, mutta myös todella hauska ottaa käsin piirretty tyyppi.

Muista vierittää alaspäin ja tarkistaa kuvakkeet, jotka sopivat myös teemaan täydellisesti!

Perinteiset näkökohdat:

Perusrakenne on pelissä.
Käsintehdyt kirjaimet sopivat hyvin sivuston teemaan.
Animaatio on mukava kosketus (mutta pahoillani, Flashin käyttö pitää tämän kohdan irti Web 2.0 -luokasta).

Web 2.0 -parannukset:

Rakenne on erinomainen.
Pudotusvarjot lisäävät realistista syvyyttä.
Nice kuvakkeet, valokuvat ja kuva.

14. DSGN + DVLP

Jälleen musta ja valkoinen värimaailma toimii tällä sivustolla, ja he korostavat tätä suuntaa joidenkin puhtaiden kuvakkeiden avulla, jotka on vedetty heti Web 2.0-käsilaukusta.

Kotisivu on itsessään eräänlainen splash-sivu, jolla on hyvät kuvakkeet, vahva ulkoasu ja jopa pieni valokuvaus. Kaikki nämä elementit yhdistyvät hienostuneesti ja pystyvät tuottamaan melko vähän energiaa.

Huomaat, että toissijaiset sivut käyttävät erillistä 3-sarakemallia, jotta tiedot voidaan palvella. Se on kaikki hyvin minimalistinen muotoilu, mutta se ei ole huono asia.

Perinteiset näkökohdat:

Musta, valkoinen ja harmaa tarjoavat erinomaisen tunnelman.
Hyvä tasapaino tyypin kotisivulla.
Kolmen sarakkeen sivupohjamalli mahdollistaa yhdenmukaisen tiedonkulun, kun et ole siirtynyt etusivulta.

Web 2.0 -parannukset:

Sosiaalisen median tietoisuus on ehdottomasti pelissä.
Kiiltävät kuvakkeet hajallaan kaikki tarvittavat värit.
Hyvä sekoitus valokuvista ja kuvakkeista.
Jumbo-kuvakkeet ovat esillä toissijaisilla sivuilla.

15. Marchand de Trucs

Joten ehkä en voi puhua kieltä, mutta se ei tarkoita sitä, että sivusto ei vielä puhu minulle ... Okei, se oli lama, mutta silti tämä sivusto on melko makea. Se sisältää upeita taideteoksia, ja sen takana on loistava säätiö ja jäsennelty sisältö. Ei huonoa, mitä (mielestäni) näyttää olevan verkkokaupasta!

Perinteiset näkökohdat:

Erityistä huomiota yksityiskohtiin.
Väriteoria on hyvin pelissä, ja se on hyvin mukana paletti siinä.
Hyödyntää kirjasimia, jotka noudattavat sivuston yleistä teemaa.

Web 2.0 -parannukset:

Erittäin hieno esimerkin käyttö otsikossa
Suhteellisen suuret kuvakkeet.

16. Paiko

Paiko, vaikka se on yksinkertainen, on yksi suosikkikohteistani luettelossa. Se esiintyy perinteisten muotoilupalojen ja Web 2.0 -parannusten yhdistelmänä: hyvät kaikenkokoiset mallit (mukaan lukien hyvin Web 2.0: n mega-otsikot), suuri välilyönti ja tietenkin aina tärkeä verkko, joka pitää kaiken yhdessä.

Valinnan lisääminen tekstuuriin taustalla asettaa sivuston erilleen ja lisää toisen kerroksen jo vahvaan muotoiluun; sitä hoidetaan huolellisesti, eikä sitä käytetä liian paljon, koska se on tietyissä sivustoissa. Tämä tekstuuri, yhdistettynä sivuston hienostuneempaan houkutteluun, menee pitkälle vahvistaen Paikon identiteettiä.

Selaa yli portfoliosivulle nähdäksesi erinomaisen välimatkan ja ristikkorakenteen, puhumattakaan muutamasta hauskasta esimerkistä hyvin rajatuista kuvista.

Perinteiset näkökohdat:

Yksinkertainen kaksirivinen ristikkorakenne, jossa kourutila antaa sille mukavan ilmavan tuntuman. Tätä rakennetta kuljetetaan koko sivustolla, mikä antaa sille erittäin yhtenäisen virtauksen.
Crafty tunne lisää mukavan kosketuksen, olematta ylivoimainen.
Fontin vaihtelut ja väri ovat erittäin hienostuneita.

Web 2.0 -parannukset:

Jumbo-tekstiä!
Otsikko on valtava ja erittäin luettavissa, ja se toimii hienosti alla pienempää tyyppiä vastaan.
Suuri kuvia ja ulkoasua portfoliosivulla.
Konkreettinen tekstuurin käyttö lisää yleistä identiteettiä.

17. Matt Dempsey

Toisen ääripään teksturointitiheydellä meillä on Matt Dempseyin sivusto. Nyt on varmasti jotain liian paljon tekstuuria, ja joillakin on kelvollinen kohta, jos he väittivät, että tämä sivusto menee kauas.

Pidän silti siltä, ja yksityiskohdat voittivat minut, kun aloitin tietojen läpi. Matt ei pelkää rikkoa muutamia sääntöjä, jotka ovat aina kiinnittäneet minua (kuten pidättäminen informaation yläpuolella, mielestäni keksittiin pyöreän pöydän keskustelu yliajattelevista markkinointilaisista. Sanon niin, koska kerran olin yksi näistä markkinoinnin henkilöistä.).

Kun se tulee alas, Matt Dempsey esittelee työnsä ja sivustonsa rohkealla ja "kasvoillasi" tavalla. Ja muutamien sääntöjen rikkominen on se, mitä suunnittelijana on kyse, ovatko säännöt vanhoja vai uusia.

Perinteiset näkökohdat:

Uskokaa tai älkää, tekstuurin taustalla on yksinkertainen ristikkojärjestelmä.
Erinomainen ja ainutlaatuinen
Ei pelkää murtaa muutamia sääntöjä

Web 2.0 -parannukset:

Matt käyttää selkeästi Web 2.0 -ohjelmaa fontteihinsa ja logolleen
Hyvän teknologian käyttö sisäsivuilla (JavaScript-liukusäädin on hieno kosketus).
Jokainen tärkeä tieto on valtava ja helppo lukea.
Portfolio esittelee työn hauskalla, huipputekniikalla.

18. Digital Mash

Digital Mashin avulla näet, että paljon ajatuksia meni kohteisiin, jotka he halusivat sisällyttää sivustoon tai vielä paremmin kohteisiin, jotka he päättivät jättää pois.

Rasvan leikkaaminen on tärkeä käytäntö jokaiselle suunnittelijalle, ja Digital Mashin perusteet ja vain perusteet. Avaa sivu ja tiedät muutamassa sekunnissa, mitä sivuston kirjoittaja on kyse.

Taustan sileä gradientti on hieno työ esittää sisältöä hienostuneesti. Puhtaasta tyypistä, kuvion rehelliseen grafiikkaan, sivusto pitää sen yksinkertaisena.

Paras osa on, kun kaivataan syvemmälle sivustoon. Suorita työsi sivu ja löydät portfolion lähes vanhanaikainen; yksittäiset kappaleet näyttävät ikään kuin ne ovat valmiita painamaan ja kiinnittämään nahkakoteloon.

Kuitenkin tyylikäs esitys, dropshadows ja pienet yksityiskohdat (kuten kunkin kappaleen hieman taivutetut kulmat) antavat sille kaiken nykyajan. Yhdistetään uusi ja vanha. Pitää rakastaa sitä.

Perinteiset näkökohdat:

Hylkää pois tarpeettomia elementtejä.
Värikkäät värit kotisivulla ja toissijaisten sivujen otsikossa lisäävät vilkkaan korostuksen harmaaseen taustaan.
Tiedon hierarkia on vahva, ja niin on myös sivuston yleinen virtaus.

Web 2.0 -parannukset:

Hämmästyttävä esitys portfoliokuvista; pudotusvalot, käännetyt reunat ja pienet yksityiskohdat todella tuovat tämän sivuston korkeammalle tasolle.
Nizzan kaltevuus taustalla näyttää todella hyvin.
Suuret ja ylimitoitetut kuvat ovat ystävällisiä silmille.
Erittäin viileä navigointiratkaisu.

19. Kyan Media

Kyan Media on toinen sivusto, joka painaa voimakkaasti taajuusalueen Web 2.0 -puoliin. Pilven muotoilu ja vilkas sininen väripaletti ovat suoraan kirjaa, mutta se on erittäin vahva esimerkki standardista.

Sivusto näyttää suoraa, ja suurilla kirjaimilla kerrotaan tarkalleen mitä he tekevät ja sen jälkeen esimerkkejä työstä. Se on yksinkertainen suunnittelustrategia, joka löytyy lukemattomilta sivustoilta, ja hyvästä syystä. Se on nopeaa ja ei uhkaa lyhytaikaista huomiota.

Ja kuten kaikki hyvät esimerkit, se käsittää tekniikan samoin kuin perinteiset suunnittelusäännöt. Kestää jonkin aikaa ja työnnä esimerkkejä työstä. Se on hauska ja informatiivinen tapa esittää esillä olevia salkunpalasia ja antaa meille käyttäjälle kaivamaan syvemmälle tai saada perusasiat vain yhdellä silmäyksellä.

Perinteiset näkökohdat:

Kaikilla on äärimmäisen vankka tunne.
Jokaisen sivun yleinen asettelu on vahva
Informaatiohierarkia on hieno.
Fontit, otsikot ja kirjasimet ovat yhdenmukaisia koko ajan.

Web 2.0 -parannukset:

Kirkas sininen väripaletti.
Hauska kuvankäyttö (kuka ei pidä pilviä?).
Punchy-valokuvaus.
Hyvä teknologian käyttöönotto.
Pienet pudotusvalot lisäävät syvyyttä.
Erittäin luettavat fontit ja ylisuuret otsikot.

20. Rockatee

No, se sanoo "Functional Design" otsikossa, joten se olisi parempaa työtä, eikö? Onneksi tämä sivusto tekee. Se on toinen esimerkki siitä, miten tekstuuri leviää web-suunnittelumarkkinoille ja vahvistaa käsityksen siitä, että olemme hyvin verkon surffailun nopea aikakausi.

Jotain, mitä huomaat, on, että Rockateessa on melko vähän projekteja, jotka näkyvät salkun osassa, joten virtaviivainen ratkaisu oli ehdottomasti kunnossa. He tekivät niin sarjan snapshots, jotka esittelevät syvyyttä niiden tuottelias salkun. Tee itsellesi hyvä ja tarkista se.

Toinen merkintä on mukava navigointi. Se on hyvin sijoitettu ja tekee sivustosta tuulta napsauttamalla. Ne edes auttavat sinua etusivulla mukanaan mukava iso painike, joka johtaa salkkuun.

Perinteiset näkökohdat:

Kaikilla on äärimmäisen vankka tunne.
Jokaisen sivun yleinen asettelu on vahva.
Väriteoria on hyvin tutkittu ja toteutettu.
Vahva yksityiskohtien huomio.

Web 2.0 -parannukset:

Fantastic navigointi.
Suuret painikkeet vievät sinut tärkeisiin bitteihin.
Cool "snapshot" salkku, jolla on suuria yksittäisten töiden kasveja.
Sivusto näyttää suunnittelijoille monta sivuprojektia, mutta ei anna heidän päästä keskeisten elementtien tielle.
Hyvä idea aikajanalla "Tietoja" -sivulta.

21. Asiat, jotka ovat ruskeita

Toinen suosikkini on Things That Are Brown. He vetävät erittäin kiillotetun sivuston, joka on yhtä suuri kuin (tai parempi kuin) suuryritysten luoma sivusto, mutta he myös antavat sinulle sisäisen tarkastelun kulissien takana oleville ihmisille.

Noin sivulta löytyy suuri valokuvaus, joka on ammattimaista, ja siinä on myös hyvin kotitekoinen valitus. Voit kertoa, että joukkue otti matkan ulkona, huomannut kunnon paikalla, ja otti muutaman valokuvan omilla digikameroillaan.

Ammattilaiset, mutta tavoitettavissa ja ystävällinen tiimi ovat täsmälleen sellainen ryhmä, jonka kanssa haluaisin työskennellä. Nämä ihmiset ovat todellisia.

Tämä on yksi niistä harvinaisista sivustoista, jotka saumattomasti sulautuvat voimakkaisiin suunnittelusääntöihin modernin parannuksen avulla. Niiden vihje, "Humbly Awesome", on kuollut.

Perinteiset näkökohdat:

Nizzan värinen ja hieno aksentti.
Hyvä käyttää taidetta, joka integroituu hyvin.
Kiinteä ja johdonmukainen koko.

Web 2.0 -parannukset:

Navigointi on puhdas ja helppo lukea.
Mukavat napit, jotka eivät liioittele kiiltoa.
Valokuvaus on henkilökohtainen ja lisää ihmisen kosketusta sivustoon.
Salkku on selkeä ja helppokäyttöinen.
Otsikot ovat suuria, mutta hienostuneita.

22. Andrew Bradshaw

Tämä on ehkä yksi listan hienostuneimmista sivustoista. Andrewilla on hieno tapa sitoa tekstuuria, tyyppiä, painikkeita ja valokuvausta suljettuun pakettiin. Hän myös pitää hierarkiaa mielessä, korostaen tärkeitä näkökohtia ja minimoi ne osat, jotka eivät välttämättä kiinnosta kaikkia käyttäjiä.

Navigointi on korostus, jossa vaihtelevat värit tulevat näkyviin, kun liikutat välilehtien päälle. erittäin tyylikäs kosketus.

Huomaa myös teksturoitu otsikko ja vahva kirjasimen valinta käytetty logo. Toisaalta Andrew yhdistää hienousta ja aksentteja luomaan kauniin sivuston, joka on perusteellinen ja vakuuttava koko.

Perinteiset näkökohdat:

Yleinen houkutus puhdasta hienostuneisuutta.
Hyvä aksenttielementtien käyttö sekä värillä että tyypillä.
Kuten tavallista, vahva verkkojärjestelmä pitää sen yhdessä.
Hierarkia toteutetaan hyvin.

Web 2.0 -parannukset:

Erilaiset nappulat.
Valokuvatoimintojen ja kuvaesittelun loistava käyttö.
Ihmeelliset yksityiskohdat navigoinnissa.

23. James Lai

Viime aikoina minulla on asia yhden sivun verkkosivustoille, ja kuten olet luultavasti arvannut, olen myös karkea tekstuuri. Anna James Lai, suunnittelija, joka osaa esitellä itsensä tyylikkään, tekstuurin ja animaation avulla.

Eniten kiitän häntä hänen kyvystään pitää sivustonsa yhdelle sivulle ja antaa meille "Kaikki minusta" -sivu, joka löytyy lähes kaikista sivustoista. Vaikka sijoitan suurta arvoa ihmisen elementtiin, joskus teos puhuu itsestään, enkä voi vikaa kaveria uskomaan omaan taitoonsa.

Perinteiset näkökohdat:

Yksinkertainen, yksisivuinen ratkaisu.
Animaatio lisää esityksen kiinnostusta (vaikka se hidasti sivustoa hieman loppuun).
Hyvää huomiota yksityiskohtiin.

Web 2.0 -parannukset:

Valtakunnallinen kotisivu kertoo sivuston tarkan tarkoituksen.
Yhteystiedot on helppo löytää.
Cool pikkukuvat auttavat käyttäjiä navigoimaan salkun.
Mielenkiintoinen tekstuurin käyttö.

24. Subvert

Subvert ei kuulunut pelkästään sen ilmeisen toimivan asettelun vaan etusivun haalistumiseen. Esitys on hauskaa, mutta se on myös informatiivinen ja arvokas potentiaalisille asiakkaille.

Taustan tekstuuria täydentävät läpinäkyvät yksityiskohdat, mukaan lukien upea navigointijärjestelmä, jossa on läpinäkyviä välilehtiä! Tämän navigoinnin lepotilan tila on hienovarainen ja ylläpitää avoimuutta.

Minulla on taipumus siirtyä suoraan näiden sivujen työ sivuille, eikä Subvert tuo pettymään esittelyynsä. Verkkorakenne on vahva ja helppokäyttöinen, ja käyttäjä klikkaa klikkaamalla laajennettua näkymää työstä.

Perinteiset näkökohdat:

Suuri kokonaisvirtaus.
Portfolion vahva esittely "Työ" -sivulla.

Web 2.0 -parannukset:

Valtava tyyppi esitetään haalistuvassa kuvaesityksessä.
Läpinäkyvät navigointi-välilehdet!
Painikkeet ovat mukavia ja lisäävät hyvän kontrastin taustoihin.
Diaesitys toimistosta "Yritys" -sivulla on mukava kosketus.
Sisältää tekniikan.

25. Yellow Bird Project

Ensi silmäyksellä tämä sivusto saattaa näyttää hieman hämmentyneeltä tai hajanaiselta, mutta mitä enemmän katson sitä, ja mitä enemmän selata sivuja, sitä enemmän olen huomannut organisaation vahvuuden. Parempi vielä, Indie-innoitettu muotoilu alkaa todella valittaa pidempään oleskeluun, ja sivuston hajanaiset ulkoasut todella sopivat teemaan.

Jos valitset valokuvavalikoiman, näet houkuttelevan amatöörikuvat, jotka jälleen lisäävät indie-ilmeen ja näyttävät tuotteesta.

Tällainen maanalainen lähestymistapa, joka on suosittu sivustot kuten threadless.com, välittömästi liittää katsojan tuotteeseen.

He haluavat olla osa väkeä, eivätkä tuntevat ikään kuin joku yrittää myydä jotain. Jos tämä ei ole Web 2.0 -filosofia, en ole varma, mikä on.

Perinteiset näkökohdat:

Crafty-logo todella vahvistaa tunnelman, joka toteutetaan koko sivustolla.
Vaikka se tuntuu hajanaiselta tai löysältä aluksi, huomaa, että tämä "koottava" look on täsmälleen mitä suunnittelijat ovat menossa. Ne vetävät ulkoasun ja tekevät sivustosta helppoa.
Johdonmukainen, ei-perinteinen lähestymistapa.

Web 2.0 -parannukset:

Se on enemmän filosofiaa tämän kanssa. Vaikka Web 2.0: n sosiaalinen näkökohta on täysipainoisesti tehokas, tämä sivusto on myös vahva, koska se on viruksen markkinoinnin lähestymistapa ja suuri perustana oleva hyväntekeväisyys.
Rakentaa yhteisöä!
Suuri valokuvia ja helppo navigointi eivät vahingoita.

Sulkeutumassa ...

Web 2.0 on kova standardi määritellä , kun perinteiset suunnittelustandardit ovat jäykkä kokoelma sääntöjä ja ohjeita (verkkorakenne, väriteoria, kirjainten välinen etäisyys, karsinta, seuranta jne.), Web 2.0, joka sisältää samankaltaisia standardeja, on melkein enemmän elämäntapa.

Se yhdistää filosofian, markkinoinnin, teknologian, helppokäyttöisyyden ja lukuisat muut piirteet kiireisen maailmankaikkeuksemme kanssa, jolla on perimmäinen tavoite helpottaa massojen tekemistä.

Tältä osin Web 2.0 ja perinteiset säännöt, jotka perustettiin vuosien varrella, viime kädessä jakavat saman tavoitteen: järjestää kaaos ja yksinkertaistaa monimutkaista .

Nykyään se voi olla kova keikka, joten tarvitsemme kaikki käytettävissämme olevat välineet, olivatpa ne edistyksellisiä, tai ovatko ne todisteena vuosisatojen ajan.

Kirjoitettu yksinomaan Josh Searsin WDD: lle. Hän on kirjailija, kuvittaja ja suunnittelija verkkopohjaisten projektien murrosta varten. Hän tekee elantonsa Lead Web Designer, Creative Director ja Co-Owner of Littlelines.com . Sinä pystyt tarkista hänen työnsä täällä , tai seuraa hänen päivityksiä Twitterissä .

Kuinka käytät perinteisiä Web 2.0 -elementtejä? Kerro esimerkkejä omasta salkusta tai muista hyvistä esimerkkeistä, joita saatat joutua kohtaamaan.

suunnittelusäännöt mallien kokoaminen perinteinen web 2.0