Ah, muistan päivän hyvin ... kun kaikki oli kiiltävä, pudotusvyöhykevä kaltevuus, jossa oli ainakin 6 kappaletta leikekuvia ja 5 juhlavuoden toimistotyöntekijää. Rakastimme kuvioita näppäimistöistä, joilla on järjetöntä painikkeita, ja 3D-efektitikkuja, joilla on kiiltäviä symboleja.

Ja mitä tapahtui? iOS 7 tuli mukaan. Kuvapisteiden kaltevuus työkalu alkoi kerätä pölyä ja poistimme valtavan valokuvakokoelman.

Tasainen muotoilu siirtyi vuonna 2013 . Kaikkien täytyy olla kirkas, sarjakuva ja tietenkin tasainen. Samalla tavalla kuin tasainen muotoilu oli reaktio skeuomorfismiin, alkaa nähdä, että asiat menevät aivan toisella tavalla kokonaan.

Joten, mikä on uuden vuoden maku? Olen iloinen, että kysyit: sivustot, jotka näyttävät avoimen lähdekoodin ohjelmistoyrityksen lataussivulta, joka suljettiin loppupuolella 90-luvulla.

Tämä on dokumentoitu Brutalistiset verkkosivut , joka nosti vetopalvelun ja keräsi katteen Washington Post ja Fast Co nimeä pari. Mutta varmasti nämä ovat vain verkkosivustoja, jotka ovat pretendoista suunnittelutoimistoista ja kokeellisista taiteilijoista? Brutalist-verkkosivustojen näyttelyssä tämä on enimmäkseen totta, mutta alkaa nähdä tämä esteettinen vuoto valtavirtaan. Kiva! Emme voi katsoa tyylikästä tasomaista muotoilua loppupäivämme, voimmeko?

Henkilökohtaisesti rakastan tätä suuntausta. En ole terävin web-suunnittelija siellä, eikä haluan käyttää hackneyed-kehystä - mitä minä voin hoitaa yhdessä on paras, mitä voin tehdä.

Minulla oli aikaa viettää aikaa pyyhkäisemällä internetiä vanhentuneelle web-suunnittelulle, ilahduttaen typerä Times New Roman ja hankalat kehykset. Todennäköisesti, koska se muistutti minua yksinkertaisemmasta ajasta, jossa ihmiset kutsuivat itsensä verkkovastaaviksi ja kaikki oli pysyvästi "Rakentamisessa".

Mutta haluavat oppia web design tyhjästä sen sijaan, että otettaisiin käyttöön WP-teema tai CSS-puitteissa olen aina ollut liian häpeällinen luoda unelmieni yksinkertainen, ruma sivusto. "Mikä olisi asia?", Ajattelin. Se näyttää siltä, ​​että se näyttäisi naurettavalta. En voi käyttää sitä portfoliota mihinkään näennäisesti sotku.

Nähdäkseni CSS-light-verkkosivustoja, joilla ei näkynyt JavaScriptia, antoivat minulle luottamuksen, että minun ei tarvitse enää työskennellä muiden ihmisten sivustoilla ja tehdä omia.

Uusien minimalististen sivustojen valinnassa huomasin useita keskeisiä teemoja, jotka näyttävät kasvattavan kauniisti rumajaan.

Yksivärinen

Mustavalkoinen muotoilu tekee täsmälleen mitä hyvän mallin pitäisi tehdä: kiinnittää huomiota sisältöön.

001

Ei Fancy CSS

Muista hyvät vanhat päivät? Kun jokainen omisti sivuston ja oli jotain todistettavaksi? Ei (tai pieni) CSS-lähestymistapa tuo takaisin ne päivät, ja henkilökohtaisesti tekee minusta erittäin nostalgista yksinkertaisempia aikoja, jolloin verkkosivusto voisi olla vain lyhyt bio ja linkkien kokoelma.

002

Kalteva / päällekkäinen teksti

Kalteva teksti heittää käyttäjän pois vähän, eikä hämmästyttävällä tavalla . Sen sijaan se on jotain, jota käyttäjä ei ole tottunut näkemään, joten se tekee voimakkaan vaikutelman.

Katso kokeellisen tekstin sijoittelua, jota Loïc käyttää hänen verkkosivuillaan . Luettavuuden täydellinen huomiotta jättäminen antaa kävijöille tunteen korkean muotiliikkeen, jolla ei ole hintalappuja. Se on niin epävirallinen (ja tässä tapauksessa vieressä), että se on tyylikäs.

004

Pientä huomiota mittakaavassa tai pehmusteessa

Bloombergin saada melko kokeellista näinä päivinä, ja minä rakastan sitä. Kuvittele koettelemukset ja vaikeudet, joita suunnittelija joutui tekemään saadakseen sen hyväksytyksi ison pomon kanssa.

Syy tämä on mahtavaa, että se on niin erilainen. Se kiinnittää vähän huomiota kovat suunnittelusäännöt: jättää riittävästi välilyöntiä elementtien välillä, pitää asiat samalla mittakaavassa ja varmistaen, että kaikki on kaikkien laitteiden kannalta helposti luettavissa.

005

Viittaukset vanhaan teknologiaan

Monet meistä ovat hauskoja muistoja Windows 98: sta tai aikaisin Mac-käyttöjärjestelmistä. Jotkut sivustot nostavat nostalgian tunnetta - ja ehkä huumoria - viittaamalla vanhoihin ohjelmistoihin. Loppujen lopuksi paljon brutalistista verkkosuunnittelua ei tule "vanhoilta päiviltä".

Katso tämä esimerkki osoitteesta Lähetä HTML (nämä kansiot sisältävät kukin kokeellista taidetta).

006

Mitä tämä tarkoittaa suunnittelijoille

Ajattelimme, että tasainen = yksinkertaisuus, mutta silti silti tarvittiin paljon suunnittelutyötä, jotta se olisi oikein.

Kun brutalistinen estetiikka tulee etulinjassa, suunnittelijoiden on luotettava vähemmän perinteisiltä CSS-kehyksiltä ja koodisivustoilta tyhjästä.

Ei kuitenkaan näytä olevan yrityksiä, jotka käyttävät tätä suuntausta sivustoissaan. Bloombergin ja eräiden muiden suurempien nimien brutalistinen muotoilu on tällä hetkellä vain suunnittelutoimistoille, kokeellisille sivustoille ja henkilökohtaisille blogeille.

Jos haluat tehdä oman brutalistisen verkkosivuston, tässä on muutamia viitteitä ...

Kaada CSS pois nykyisestä sivustostasi

Vaikka jotkut sivustot käyttävät suuresti CSS: ää horisontaaliseen paikannukseen, on mahdollista kopioida kaikki tyylit tietyiltä sivustoilta ja silti näyttää ne "oikein". Tässä on esimerkki:

Jos sivustosi luottaa flashy animaatioihin, JavaScript-tai fancy CSS, se on todennäköisesti remaster, jos haluat ottaa tämän tyyliin. Itse asiassa syy, jonka sanoin irtisanonut WordPressin, johtui siitä, etten löytänyt teosta, joka sovi näköömme. Lopulta olen todella päässyt oppimaan HTML / CSS muokkaamalla muinaista mallia 2000-luvun alusta. Sen jälkeen olin luottavainen käymään eteenpäin ja aloittamassa, kuuntelemalla oma sotkuinen CSS ja tekemällä kauimpana juttua kiillotetusta, "modernista" sivustosta.

Leikkaa yksivärinen

Joskus brutalistinen muotoilu tarkoittaa yksinkertaista muotoilua. Ja se on aina loistava käyttökokemus. Nykyisen väripaletin leikkaaminen vain 2 väriin (musta ja toinen valkoinen, teknisesti) voi auttaa vähentämään käyttäjän ylikuormitusta ja antamaan heille selvemmän suunnan mihin mennä. Loppujen lopuksi et näe sivustoja, joilla on eri värejä tekstialueella, koska on vaikea keskittyä.

Luo mainostekstiä

Kuka sanoi, että sinulla on oltava kaikki sopivasti? Loïc Dupasquierin yllä oleva sivu on esimerkiksi rohkea lausunto, joka kertoo jotain suunnittelijaa. Tarkasteltaessa täsmälleen samaa kuin jokainen muu potentiaalinen vuokraus ei ole hyvä näkyvyys.

Ellet ole tällä alalla tunnetuin suunnittelija, olet aina toiseksi paras. Selkeyttämällä perinteisiä "sääntöjä" typografiasta, olet erottunut joukosta.

Uudelleen oppia perusasiat ja vanhoja tapoja

Minulle ei ollut kyse mallin tai taitojen mukauttamisesta uuteen mentaliteettiin. Opin verkkosuunnittelun perusteet, kun sivustot näyttivät oikealta kuin ne, jotka olen näyttänyt sinulle, joten minun tarvitsi vain nopea päivitys ja saada töihin.

Suosittelen tarkistamaan vanhojen sivustojen ja Brutalist-sivustojen lähdekoodin, vanhoja HTML-tutoriaaleja , tai tämä kultakaivos joka sisältää luettelon aikaisimmista verkkosivuista, jotka ovat vielä elossa.

Jos tämä tyyli toimii hyvin (ja jos se ei ole)

Lopulta verkkosivusto on aina tasapaino itsensä ilmaisemisen ja parhaan käyttökokemuksen luomiseksi käyttäjille.

Blogissa on luultavasti parasta keskittyä tekemään tekstin rungon helppo sulattaa. Huomaat, että vaikka Bloombergin kappale Yahoo-palvelussa alkaa melko outo, tekstin pääosa on helppo lukea.

Joten, kun olet rakentamassa blogia, on parempi noudattaa artikkelin rungon yleissopimuksia. Esimerkiksi, LANGALLINEN Suunnittelu on varsin erottuva, mutta itse artikkeleissa he käyttävät miellyttävää kirjasinta ja pitävät sitä luettavina.

Suunnittelijalle, joka toimii enimmäkseen tukkeutuvien yritysten kanssa, kokeellinen salkku saattaa saattaa asiakkaan irti tärkeimmistä hetkellisistä yhteyksistä.

Loppujen lopuksi se tulee alas tietämään yleisösi, ja voitko päästä eroon täysin huomiotta yleissopimuksia.

Tule eteenpäin ja tee jotain häpeällistä loistavaa.