Og dette er hva vi fikk...

5.png

Dette vil imidlertid ikke gi oss nok dybde. Vi ønsker å gjøre dette rektangelet enda mer synlig buet, siden det ikke berører overflaten jevnt, men å legge til mer skygge ved å bruke lagstilene, eller å gjøre skyggen sterkere vil ikke gi oss den ønskede effekten. Bruk denne horisontal skillevegg tilbys av dezinpolio.com og legg den til midt i formen din, slik at den vil "blekne" mot hjørnene, som vist nedenfor:

6.png

Husker du at vi nevnte de fete bokstavene? Web 2.0 gjør en god bruk av fonter, fortrinnsvis veldig lett å lese, litt tegneserieaktig og fet. Vi hadde vanskelig for å velge en passende font og bestemte oss for å velge "Cooper Std".

7.png

Vi gjør for å legge til en veldig mild skygge (#5674a7) og lysgradient fra hvit øverst (#ffffff) til lyseblått (#cdd9de) ...

8.png

9.png

banner

Dette vil gi oss et veldig søtt babydesign.

10.png

Web 2.0 handler også om en god andel, og mens design er spesielt asymmetrisk, er andre så å si besettende symmetriske. Jeg foretrekker den andre typen, siden det krever mindre originalitet og smak å lage, alt du trenger er en følelse av proporsjoner. La oss si at vi legger til noen få knapper nederst og i sidehjørnet av designet vårt...

11.png

Ser dette bra ut?

12.png

Nei, det gjør det ikke fordi fanene ser altfor kaotiske ut, så vi vil sørge for at linjen på venstre sidefane "møter" linjen på den nederste fanen, slik...

131.png

Nå ser det proporsjonalt ut.

crystal_clear_app_ark2.png

banner

I tilfelle du lurer på hvorfor vi gikk glipp av et trinn, er lagstilene for faner nesten identiske med de vi brukte for hovedrektangelet, og det samme gjelder skrift- og lagstilene til "fanene". For læringsformål kan du laste ned PSD-filen og analysere prosessen. Husk at alle disse semi-synlige gradientene og 1px-konturene ofte er det som utgjør forskjellen mellom flott webdesign og amature forsøk på design. Lykke til!

Last ned psd-fil