Sisällön intensiivisen ulkoasun vinkkien ja esimerkkien suunnittelu

Verkon kattavien ulkoasujen luominen vaatii taitoa ja paljon omistautumista. Web-suunnittelijat suorittavat työtä, jossa se ei pysty eniten tekemään, ja hyvin kehittyneellä tavalla. Kun web-sivut ovat kehittyneet, olemme nähneet tarpeen täyttää enemmän tilaa ja pitää sisällään enemmän sisältöä kuin koskaan ennen. Jos jo ymmärrät, kuinka suunnitella verkkosivusto, se on valtava bonus näiden menetelmien ymmärtämiseksi paremmin. Sivuston keskeiset ominaisuudet muuttuvat harvoin. Kuitenkin enemmän kuin keskimäärin sivun sisällön muut tekijät tulevat mukaan lukien valkoinen tila, typografia, elementtien paikannus, muun muassa.

Aiomme mennä yksityiskohtaisesti kattamaan joitakin tärkeimpiä vinkkejä sisällön intensiivisten asettelujen rakentamiseen. Nämä voivat vaihdella sosiaalisen verkostoitumisen sovelluksista, suurista yritys- ja yrityskohtaisista sivustoista tai kaikesta väliltä. On tärkeää kysyä itseltäsi "mitä yritän saavuttaa tällä suunnittelulla?"kun suunnittelet sivuja, koska se auttaa sinua ennakoimaan laajemman näkymän.

Mukautetut Web-sivut

Riippumatta siitä, kuinka kokenut käytännön web-suunnittelu voi olla, on totta, että meidän kaikkien oli aloitettava jonnekin. Mukautettujen verkkosivujen suunnittelu on yleensä ensimmäinen askel kohti web-ohjelmoinnin uraa ennen tavanomaisten tietojen käyttöä.

Suosittelen aina, että luodaan pieni luettelo sivuelementeistä, jotka katsotaan asennettu malliin. Kun nämä kaikki on kirjoitettu alas, se on helpompi poistaa huonoja ideoita tai poimia vastaamatta jääneitä tai unohdettuja jalokiviä. Tämä myös helpottaa suunnittelua helpottaakseen stressiä tiellä.

Layout Wireframe

Yleisissä 5-sivuisissa sivuissa näet usein samat elementit toistuvasti. Yläkulman logo, päänavigointilinkit, pääsisältöalue, joka mahdollisesti jaetaan sivupalkilla ja muilla toiminnoilla (sisäänkirjautuminen, hakukenttä jne.).

Harkitse hyvä lähtökohta, jos haluat rakentaa yksityiskohtaiset sivun asettelut. Monet suunnittelijat pitävät hyödyllisenä piirtää mahdolliset lankamallit, jotta ei-niin ilmeiset puutteet suljetaan pois. Tämä ei vaadi mitään fancy-paperia, ja se voidaan tehdä jopa laskeutuneessa muistikirjassa. Lankakehyksen tarkoituksena on antaa karkea käsitys siitä, missä sivustojen asettelun pitäisi sijaita huoneen kanssa täyttääkseen tiedot myöhemmin.

Sisällön raskaiden asettelujen yhteydessä on otettava huomioon, kuinka paljon alustaa tulee. Suljetun 2-3 sarakkeen ulkoasun rakentaminen 100+ sivua pitkälle, monimutkaiselle sisällölle ei jätä paljon tilaa hengitystilalle. Piirrä ja suunnittelee etukäteen voit hallita tilavan huoneen määrää sivun sisällölle. Tämä ei kata vain teksti- tai lohkoalueita vaan käsittelee myös kuvia ja videoita.

Brilliant White Space

Valkoinen väli on mahdollisesti tärkein tekijä otetaan huomioon sisällön intensiivisessä suunnittelussa. Verkkosivuston sisältö sääntöjä se alll, enemmän kuin mikään säännöllinen verkkosivuilla. Jos lukijat eivät pysty ymmärtämään sisältöä, koska ei ole tilaa sulattaa sanojasi, liikenne on täplikäs ja epämiellyttävä.

Kappaleet ja sivun otsikot ovat hyvä paikka aloittaa mukautuksista. Käyttämällä CSS-ominaisuuksia sinun pitäisi pystyä manipuloimaan ulkoisia marginaaleja ja pehmittämään jokainen lohkoviivan tekstielementti. Näitä ovat kaikki otsikot 1-6, kappaleet, lohkot, luettelot, esivalmistettu teksti ja muutama vähemmän elementtejä.

Jos haluat pitää lukijan huomion, on tärkeää käyttää välilyöntiä tärkeimpien tekstielementtien alle. Kappaleet ja pienemmät otsikot toimivat parhaiten 15px-25px alareunalla. Suuremmille sivuelementeille, kuten h1: lle tai h2: lle, harkitse 35px + (tämä riippuu myös kirjasinkokoasi). Pystysuuntaisten elementtien väliset tilat ovat tärkeitä selaamiseen ja skannaukseen. kuitenkin viivankorkeus on toinen tärkeä CSS-ominaisuus, joka vaikuttaa tekstiosan viivojen väliseen etäisyyteen. Kappaleilla tulisi olla paljon suurempi rivikorkeus kuin niiden kirjasinkoon, joten rivien välissä on runsaasti ylimääräisiä pehmusteita.

Harkitse dynaamisia tyylejä

Vältä etäisyyttä, digitaalinen typografia pitäisi manipuloida tavalla, jolla se hyppää sivulta. Nykyään maailmassa on satoja miljoonia verkkosivustoja, ja on yleistä nähdä sama fonttityyppi kaikkialla.

Jos suunnittelet verkkosivuston ulkoasua, jossa on paljon sisältöä, tulos näyttää lopulta toisesta suloisesta mallista. Edistyneille typografisille tyyleille on runsaasti ominaisuuksia, joita voi toistaa. Tekstin varjot, vähemmän / enemmän kirjaintuloa, taustalevyt, kuvakkeet… lista on loputon.

Todellakin olet suunnittelija ja viimeinen sana on laki. Suunnittelu ei ole vertailukelpoinen yhdellä kaistaväylällä, jolla ei ole kääntymistä. Prosessin aikana voit mennä takaisin ja vaihtaa tyylejä, manipuloida uusia elementtejä tai roskia käsitteen kokonaan. Harkitse muita hyödyllisiä CSS-vinkkejä ja toista, mitä parhaiten sopii!

Käytä pudotusvalikkoja

Niin paljon sisältöä on epätodennäköistä, että kaikki linkit mahtuvat yhdelle sivulle. Sivujen ylikuormituksen käsittelystä on monia vaihtoehtoja. Ylimääräisten linkkien sijoittaminen sivupalkkilohkoihin tai ommellut sarakkeisiin sivuston alatunnisteessa on kaksi tarkoituksenmukaista vaihtoehtoa.

Kätevin ja kätevin valinta on luoda avattavasta navigointijärjestelmästä, jossa on pääluokat ja alaryhmät. On myös monia avoimen lähdekoodin komentosarjoja, jotka tarjoavat alaryhmiä, jos sinulla on intensiivisiä yksityiskohtia.

Mahdollisesti nopein ja vähiten turhauttava strategia on aloittaa JavaScript-kehyksestä. Suosituimpia ovat jQuery, MooTools tai mahdollisesti prototyyppi. Kaikki nämä kirjastot tarjoavat dokumentaatiota, ja monissa on käytettävissä vapaat pudotusvalikosta.

Suunnittele sisällön näkymät

Käytännössä on paljon vaikeampaa luoda yksinkertaisella kehonalueella, joka sisältää kaiken sisällön, jonka keskimääräinen sivustosi sisältää. Siirtyvien selainstandardien ja puolisäkeilevän mobiilin tuen avulla ei ole ihme, että tällaiset sisältöä vaativat sivustot ammutaan alas. Ole herkkä jokaiselle näytettävälle web-sivulle. Jotkut sisältävät useita kuvia, toiset saattavat sisältää ensisijaisen grafiikan tai videon tai mitään grafiikkaa. Kun olet lopettanut lopullisen asettelun koodauksen, luo useita HTML-sivuja eri näkymien järjestämiseen.

Näillä kaikilla on sama sisäinen merkintä, paitsi sisällön sisällä sisällön alueella. Kukin yksittäinen sivunäkymä voidaan manipuloida ja antaa tietoa lopputuotteesta. Vaihda tämä, jos haluat sisältää kaikki tärkeimmät näkymät, joita jokaisen sivun mukaan tarvitset. Muita esimerkkejä sivun elementeistä voivat olla kommenttikentät, videot tai sulautetut galleriat tai jaetun sivun linkit.

Suunnittele strategiat perusteellisesti

Itse asiassa ei ole täysin vaikeaa luoda voimakkaan web-ulkoasun. Monet suunnittelijat saavat kiinni pienistä yksityiskohdista, kuten lohkoelementtien tai värilinkkien tuottamisesta. Nämä yksityiskohdat ovat tärkeitä, kun ne lähettävät koko tuotemerkkiviestin, vaikka pienemmistä elementeistä viestin tulisi olla yhdessä koko sivun kanssa. Henkisesti suunnitella suunnitteluvaiheesi selvittääksesi, miten paras tapa lähestyä kaikkia esteitä. Jos työskentelet asiakkaan kanssa, olisi hyvä keskustella, minkä tyyppinen sisältö täyttää sivut etukäteen. Tämä antaa sinulle mahdollisuuden suunnitella eteenpäin ja strategisoida paras lähestymistapa yleiseen ulkoasuun.

Toinen erityisen droll-aihe on mobiilisuunnittelu. Tämä uusi markkina-alue näkee valtavan laajenemisen paitsi älypuhelimissa kuin tehokkaissa tablet-tietokoneissa. Tämä tarkoittaa, että käyttäjät saattavat käyttää ulkoasua mobiilinäytöstä - varmista, että sisältö ei ole täynnä ja että se näyttää siististi.

7 Esimerkkejä raskaan sisällön sivustoista

Alla on muutamia esimerkkejä kuvankäsittelyohjelmista suosituista sisältöpainotteisista sivustoista. Nämä ovat enimmäkseen tunnettuja tuotemerkkejä sekä fyysisillä että digitaalisilla markkinoilla. Tutustu alla oleviin ideoihin löytääksesi inspiraation omiin projekteihisi. Voit myös jakaa muiden sisältöä sisältävien raskaiden web-asettelujen kommentit-osioon.

Clicker

Clicker on uusi sosiaalisen verkostoitumisen sovellus TV- ja elokuvien ystäville. Voit rekisteröityä uuteen tiliin ja löytää joitakin suosikki klassisia TV-ohjelmia, jotka on arkistoitu kausi- ja jaksolistauksen avulla. Voit verrata sivustoa IMDB: hen vähemmän tietoa ja enemmän videosisältöä!

Web-suunnittelun tulevaisuus

Web Design 2011: n tulevaisuus lanseeraa Lontoossa tänä keväänä. Tutustu kotisivuun saadaksesi lisätietoja ja upean esimerkin tekstipohjaisesta ulkoasusta. Kaikki yksityiskohdat ovat aidosti jaettuja ja tarjoavat kaiuttimia, aikatauluja, työpajoja, sponsoreita ja paljon muuta.

Herra todennäköisesti

Tässä koominen layout päähenkilö Lord Todennäköisesti on "cartoonized" ja rei'itetty osaksi kuva. Sivusto on jaettu kolmeen sarakkeeseen, joissa jokaisessa urheilussa on uutta sisältöä, mainoksia, syötteitä ja arkistoja. Suunnittelu itsessään on hyvin retro ja taitava ottaa kuvituksia.

Microsoft

Useimmat tech-harrastajat tuntevat Microsoftin. Itse asiassa useimmat ihmiset, jotka ymmärtävät, mitä tietokone on, voivat antaa sinulle jopa lyhyen kuvauksen Microsoftista ja Bill Gatesista. Niiden kotisivulla on sisältöä kymmeniä ohjelmistopaketteja, uutispäivityksiä, lehdistötiedotteita ja kehittäjätietoja. Pieni tapa sivua alaspäin pystyt osoittamaan pystysuoran välilehden, jossa on dynaaminen sisällönvaihto.

Hakukoneiden maa

Search Engine Land on suosittu web-lehti, joka keskittyy hakukoneisiin ja Internet-markkinointiin. He päivittävät usein uskomattomia laatutietoja ja ajavat satoja tuhansia ihmisiä sivustoonsa joka päivä. Pääsivu jakautuu kolmeen sarakkeeseen, joita käytetään pitämään kunkin sisältömoduulin ja mainoksen.

Valkoinen talo

Yhdysvaltojen Valkoisen talon muotoilu näyttää hyvin puhtaiselta ja ammattimaiselta. Presidentin aikataulusta ja muista tärkeistä poliittisista tapahtumista on paljon tietoa. Yksi temppu sivutilan lievittämiseen on ollut pienen sisällön liukusäätimen lisääminen sivun otsikkoa kohti. Tämä on hyvä, kun näytät 3-4 suurta uutisotsikkoa, kun kävijät laskevat sivulle.

Yahoo-portaali

Suurten sisältöverkkosivustojen osalta Yahoo! täytyy olla trendikäs kohti huippua. Yahoo! tarjoaa satoja palveluja asiakkailleen, kuten webmail, uutiset, videot ja jopa web-haku. Tutustu joihinkin Y! portaalin linkit sivupalkista, jotta näet, miten niiden mallit verrataan.

johtopäätös

Nämä ovat vain muutamia keskeisiä kohtia ja vaiheita konkreettisten sisältöä vaativien ulkoasujen rakentamiseksi. Web-sivuja, joissa on suuria sisältövarastoja, katsotaan usein kuormana, jolla on SEO-rehua eikä mitään todellista arvoa. Suunnittelu on kaikki, koska se on ensimmäinen vaikutelma, jonka käyttäjä saa jokaisesta verkkosivustosta. Kun sisältö on suuri, siitä voi tulla häiriö ja yleistyksiä aiheuttava katastrofi. Älä koskaan lopeta harjoitusta ja vain muutaman projektin avulla voit hallita sisällön intensiivisten ulkoasujen suunnittelua.