Verkossa on niin monia opetusohjelmia ja oppaita, jotka opettavat käyttämään Web 2.0 -suunnittelua tehokkaasti. Vaikka useimmat näistä opetusohjelmista ovat hyödyllisiä, ne tappavat samalla web-suunnittelun omaperäisyyden. Esimerkiksi useimmat "oppaat" kertovat, että web 2.0 tarkoittaa kiiltävää merkkiä, raidallista taustaa ja lihavoituja fontteja. Tulos? On olemassa lukemattomia satoja malleja, joissa on merkit, raidat ja lihavoitu isot kirjaimet… eivätkä ne eroa toisistaan. Sillä ei ole väliä, teetkö web 2.0-, web 1.0- vai web 75.0 -suunnittelun, sillä kaikki on omaperäistä ja ikimuistoista.

Jos et kuitenkaan löydä mitään erityisen omaperäistä, joka symboloisi suunnitteluasi, on "turvallisempaa" mennä web-suunnittelun nykytrendeihin. Tässä on siis pieni pätkä web-suunnittelun asettelusta ja kuinka tavallinen asettelu muutetaan web 2.0 -asetteluksi.

Tätä meillä oli…

14.png

Ja tätä aiomme tehdä…

13.png

Aiomme työskennellä Photoshopissa käyttämällä vain tasotyylit; keskittyen lieviin kaltevuksiin ja varjoihin.

Aloita käyttämällä suorakulmaista muotoa pyöristetyillä kulmilla ja piirtämällä… suorakulmio.

1.jpg

lippu

Meidän on ensin annettava suorakulmiollemme syvyyttä ja elämää. Web 2.0 -suunnittelun periaatteita noudattaen vain varjot, ääriviivat ja vaaleat gradientit antavat meille tämän vaikutuksen. Siirry siis tasotyyliin ja pudota hieman lievää varjoa. Me käytimme #96aed6 tähän tarkoitukseen.

2.png

Antaaksesi muotoon hieman syvyyttä (joten se ei näyttäisi litteältä esineeltä) lisää mietoa sisävarjoa tummemmalla sävyllä (käytimme #304f82 )

3.png

Lopuksi on tärkeää lisätä pieni hahmotelma. Käytämme #FFFFFF valkoista väriä, koska varjot molemmilta puolilta ovat tummempia, haluamme vaalean ja puolinäkyvän viivan, joka muotoilee muodon.

4.png