Aloittelijan opas tasaiselle suunnittelulle

Burger King rebrand
(Kuvan luotto: Burger King Corporation)

Aikaisemmin web-suunnittelijat kiinnittivät erityistä huomiota taitojensa ja portfolionsa esittelemiseen pakkaamalla sivustoja räikeisiin kuvituksiin ja animaatioihin, jotka oletettavasti houkuttelivat kävijöitä. Sitten tuli siirtyminen kohti skeuomorfista suunnittelua, joka yritti tuoda todellisen elämän ruudulle faux-realistisilla tekstuureilla, varjoilla ja todellisilla esineiden ominaisuuksilla.

Tämä antoi tien tasaiselle suunnittelulle, joka vastusti kaikkia näitä 'keinotekoisia' suunnittelutekniikoita yksinkertaistetun, klassisesti digitaalisen esteettisyyden hyväksi. Ja vaikka tämä käyttäjäkeskeinen verkkosuunnittelutyyli on ollut käytössä jo monien vuosien ajan, se on edelleen yhtä merkityksellinen ja suosittu kuin koskaan, ja se on nousemassa uudelleen Logon suunnittelu myös. Joten jos et vieläkään ole varma, mistä on kyse, tämä opas voi olla juuri sitä mitä tarvitset ...

Mikä on litteä muotoilu?

Mikä on litteä muotoilu?



macbook pro 13 tuuman kotelo ja näppäimistön suojus
Windows 8 oli litteän suunnittelun trendin eturintamassa

Litteä muotoilu on minimalistinen muotoilu, joka korostaa käytettävyyttä. Siinä on puhdas, avoin tila, terävät reunat, kirkkaat värit ja kaksiulotteiset piirrokset.

Microsoft oli yksi ensimmäisistä, joka sovelsi tätä muotoilutyyliä käyttöliittymäänsä, jotkut pitivät sitä vastarintana suosittua skeuomorfista muotoilua vastaan, jonka Apple aloitti iOS-käyttöliittymällään. Sen sijaan, että tosielämän esine, kuten kalenteri, muunnettaisiin pieneksi realistiseksi kuvaksi, litteän suunnittelun kannattajat tunnistavat sovellukset yksinkertaisilla, kuvakkeita muistuttavilla kuvilla.

Sen sijaan, että tuodaan tosielämän piirteet rajapintaan, tämä kuvaa selkeää eroa tekniikan ja kosketettavien esineiden välillä.

Minimalistinen ei tarkoita tylsää

Litteässä muotoilussa koriste-elementtejä pidetään tarpeettomina sotkuina. Jos näkökohdalla ei ole toiminnallista tarkoitusta, se häiritsee käyttäjää. Tämä on syy tasaisen muotoilun minimalistiseen luonteeseen.

Kuitenkin vain siksi, että siinä ei ole räikeää muotoilua, se ei tarkoita, että tämä tyyli on tylsää. Kirkkaat, kontrastivärit saavat kuvat ja painikkeet ponnahtamaan taustat, tarttuvat helposti huomiota ja ohjaavat käyttäjän silmää. Minimalististen kuvien tarkoitus vaikuttaa myös tasaisen muotoilun toiminnalliseen luonteeseen.

Litteä muotoilu on yksinkertainen

sovelluskuvakkeet

Litteällä suunnittelulla on ehdottomasti hetki - onko se mennyt liian pitkälle?(Kuvan luotto: Tobias van Schneider)

Yksinkertaiset kuvat välittävät viestit nopeammin kuin yksityiskohtaiset kuvat. Kuvakkeet, kuten kuvakkeet, voivat osoittaa yleisiä toimintoja tai tarkoituksia, jotta jokainen voi helposti ymmärtää ne.

Skeuomorfisen ja tasaisen muotoilun välillä on helppo nähdä välitön ero. Huomaa, kuinka suuremmat, yksiväriset lohkot herättävät enemmän huomiota ja kuvakkeiden merkitys voidaan nopeasti havaita.

Yllä olevat kuvakkeet esittävät vain joitain vuonna 2021 käytössä olleista kuvakkeista, mukaan lukien viime vuoden kiistanalainen Google-kuvakemerkki. Vaarana on, että koska ne kaikki seuraavat tasaista muotoilusuunnitelmaa ja korostavat kirkkaita värejä, ne ovat melkein tulossa liian samanlaisiksi (kuten tutkimme tämä pala ). Tämä vain osoittaa, että trendien, kuten litteän muotoilun, ja eron joukosta erottamisen välillä on hieno viiva.

mikä olisi syy käyttää työasemaa pikemminkin kuin henkilökohtaista tietokonetta?

Mitä voit oppia tasaisesta suunnittelusta

Litteä muotoilu palaa takaisin suunnittelun perusteisiin toimivana työkaluna. Verkkosivusto on suunniteltu ja arvioitu sen toiminnan perusteella, toisin kuin se näyttää.

Tämä raaka toiminnallisuus pakottaa sivuston keskittymään käyttökokemukseen, joten verkkosivustot, jotka käyttävät tätä suunnittelutyyliä menestyksekkäästi, saavat todennäköisesti positiivista palautetta käyttäjäystävällisyydestä.

Kuinka luoda tasainen muotoilu

Tehokkaan tasaisen sivuston suunnitteluun kaikkien suunnitteluelementtien on keskityttävä tähän yksinkertaisuuden ajatukseen. Kiinteät, elävät värit antavat näkökohdille korostuksen, joka tarvitaan niiden erottamiseen havainnollistavien yksityiskohtien sijaan; sans-serif-typografia tarjoaa puhtaan, raikkaan täydennyksen kuviin; teksti on tiivis ja täsmällinen; Käyttöliittymän elementit, kuten painikkeet ja linkit, ovat selkeitä ja havaittavissa.

Kaikki on suunniteltava samaa tavoitetta ajatellen yhtenäisen visuaalisen ja toiminnallisen verkkosuunnittelun luomiseksi. Alla on upeita esimerkkejä litteästä suunnittelusta ...

Litteitä esimerkkejä: Tripfinder

Esimerkkejä tasomaisesta rakenteesta: Tripfinder

Värit ja kuvakkeet auttavat tekemään merkityksestä selkeän ja pienellä kopiolla

Tämä matkasuunnittelusovellusten suunnittelu Indonesian käyttöliittymäsuunnittelija Paha on erittäin helppo varata lento pakettien ja budjettien perusteella. Kaikki on selkeää ja ymmärrettävää, ja muotoilu perustuu enimmäkseen väreihin ja kuvakkeisiin. Kopio on tiivis, ja käyttöliittymän osa ihanteellisen lennon etsimisessä on ilmeinen.

Litteitä esimerkkejä: Burger King -sivusto

litteä Burger King -sivusto

Burger Kingin verkkosivusto on sen viimeaikaisen tuotemerkin mukainen(Kuvan luotto: Burger King)

Burger King uudet tuotemerkit vuoden 2021 alussa suosiota, ja sen uusi logo on litteän muotoilun mestarikurssi. Sen verkkosivusto on uudistettu vastaamaan sitä, ja se käyttää yksinkertaisia ​​piirroksia ja kuvakkeita ohjaamaan käyttäjiä ympäri sivustoa. Sovelluksessa on myös samanlainen virtaviivainen lähestymistapa.

miten höyhenet sisään vaikutuksia

Litteitä esimerkkejä: Sääsovellus

Esimerkkejä tasomaisesta rakenteesta: Sääsovellus

Litteä muotoilu ei riipu kirkkaasta väristä

Tämä sääsovelluksen käyttöliittymän suunnittelu osoittaa, että tasainen muotoilu voi onnistua myös ilman kirkkaita värejä. Terävä ikonografia ja suuri typografia kiinnittävät huomion sään tärkeimpiin näkökohtiin, mitä käyttäjä etsii.

Kun tutkit tasaista muotoilua työssäsi, muista suunnitella kaikki näkökohdat minimalistisella ja käyttäjäkeskeisellä näkökulmalla yhtenäisen käyttöliittymän varmistamiseksi. Kun olet tehnyt tämän onnistuneesti, käyttäjät arvostavat verkkosivustosi toiminnallista luonnetta.

Aiheeseen liittyvät artikkelit: