En dit is wat we kregen...

5.png

Dit geeft ons echter niet genoeg diepgang. We willen deze rechthoek nog zichtbaarder gebogen maken, omdat deze het oppervlak niet gelijkmatig raakt, maar meer schaduw toevoegen met behulp van de laagstijlen, of de schaduw sterker maken, geeft ons niet het gewenste effect. Gebruik dit horizontale scheidingslijn aangeboden door dezinpolio.com en voeg het toe aan het midden van je vorm, zodat het naar de hoeken zal “vervagen”, zoals hieronder weergegeven:

6.png

Weet je nog dat we de vetgedrukte letters noemden? Web 2.0 maakt goed gebruik van lettertypen, bij voorkeur zeer gemakkelijk te lezen, enigszins cartoonachtig en vetgedrukt. We vonden het moeilijk om een ​​geschikt lettertype te kiezen en besloten voor “Cooper Std” te gaan.

7.png

We zijn bezig met het toevoegen van een zeer milde schaduw (#5674a7) en licht verloop van wit bovenaan (#ffffff) naar lichtblauw (#cdd9de) ...

8.png

9.png

Banner

Dit geeft ons een heel schattig babyontwerp.

10.png

Bij Web 2.0 gaat het ook om een ​​goede verhouding, en hoewel ontwerpen bijzonder asymmetrisch zijn, zijn andere bij wijze van spreken obsessief symmetrisch. Ik geef de voorkeur aan het tweede type, omdat er minder originaliteit en smaak nodig is om te creëren. Het enige wat je nodig hebt is een gevoel voor verhoudingen. Laten we zeggen dat we een paar knoppen toevoegen aan de onder- en zijkant van ons ontwerp...

11.png

Ziet dit er goed uit?

12.png

Nee, dat is niet het geval, omdat de tabbladen er veel te chaotisch uitzien. We zullen er dus voor zorgen dat de lijn van het tabblad aan de linkerkant “raakt” met de lijn van het onderste tabblad, zoals dit…

131.png

Nu lijkt het proportioneel.

crystal_clear_app_ark2.png

Banner

Mocht je je afvragen waarom we een stap hebben gemist: de laagstijlen voor tabbladen zijn bijna identiek aan degene die we voor de hoofdrechthoek hebben gebruikt, en hetzelfde geldt voor het lettertype en de laagstijlen van de “tabbladen”. Voor leerdoeleinden kunt u het PSD-bestand downloaden en het proces analyseren. Vergeet niet dat al deze semi-zichtbare gradiënt- en 1px-contouren vaak het verschil maken tussen geweldig webontwerp en een amateuristische poging tot ontwerpen. Succes!

psd-bestand downloaden