Elements of Great Web Design The Polish

Wanneer ik ontwerpen samenstel, doe ik dat meestal in twee fasen - Lay-out en Pools. Tijdens de lay-outfase plaats ik de belangrijkste objecten op de pagina meestal met iets dat er relatief compleet uitziet. In de tweede fase - de Poolse - bespreek ik het ontwerp en pas ik kleuren aan, typ ik behandelingen, schaduwen, lagen en ruim ik het allemaal op. In deze eerste van een reeks tutorials over webontwerp zullen we naar de Poolse gaan kijken.

Een kort voorwoord

Anders dan bij Photoshop-effecten, kan webontwerp niet echt worden onderwezen in een reeks gemakkelijk herhaalbare stappen. Als je naar de meeste geweldige webontwerpen kijkt, zijn ze technisch niet moeilijk te reproduceren. U zou waarschijnlijk een screenshot kunnen maken van een ontwerp, het in Photoshop kunnen plaatsen en vervolgens hetzelfde ontwerp laag per laag kunnen repliceren. De truc is echter dat ontwerp in de eerste plaats bedenken.

Om deze reden ga ik in deze tutorials over webontwerp een paar verschillende technieken proberen om verschillende aspecten van het proces over te brengen die ik persoonlijk doormaak bij het ontwerpen van een website..

Vandaag kijken we naar een site die ik eerder dit jaar samenstelde: Not By The Hour, een subsite voor een van onze blogs genaamd FreelanceSwitch. Gelukkig, toen ik het maanden geleden ontwierp, heb ik een versie van het PSD-bestand bewaard voor en nadat ik het heb gepolijst, dus net als in een reclame voor gewichtsverlies gaan we een beetje doen 'voor en na' ...

Voordat ik enkele dingen uitleg die ik heb gedaan om de website op te poetsen, is het belangrijk om naar de voor en na te kijken.

BEKIJK VOOR EN NA

Stap 1 - Duidelijkheid:

Je zult me dit keer op keer horen zeggen, maar wanneer je ontwerpt voor het web gaat het helemaal over de pixels. Een van je doelen moet altijd zijn om dingen scherp en schoon te houden. Dit betekent bijvoorbeeld:

Tekst duidelijkheid
Bij het opstellen van tekst moet u nadenken over de anti-aliasing die u gebruikt. Om dit te doen zou je het Karakter paneel openen, wat je kunt doen door naar Venster> Karakter te gaan of wanneer je het Tekstgereedschap hebt geselecteerd en een aantal tekst hebt gemarkeerd, druk je op Ctrl-T (ja, het is dezelfde sneltoets voor transformatie, dus je moet zorg ervoor dat de tekst is geselecteerd). In het deelvenster Teken rechts onderaan kunt u kiezen tussen Geen | Scherp | Crisp | Sterk. Voor verschillende lettertypen en verschillende formaten moet u experimenteren. Ik gebruik meestal de instelling Sharp, waardoor sommige pixels worden uitgelijnd en het lettertype soms enigszins wordt vervormd bij kleinere instellingen. Maar bijvoorbeeld in de afbeelding onder de tekst maken is ingesteld op scherp, en daarom is het bij het toepassen van een 1px-omtrek zeer duidelijk gedefinieerd.
Voering
Zoals je kunt zien tussen de lichtere grijze en donkerdere grijze balken, heb ik een zwakke 1px-lijn toegevoegd. Deze truc bootst het effect van het verscherpfilter na. Als je ooit een van de verscherpfilters te vaak hebt gebruikt op een foto, zul je merken dat er kleine randen verschijnen. Dit komt omdat het benadrukken van de grens er tussen ervoor zorgt dat de twee delen meer gescheiden lijken voor uw oog en dus scherper. Zo vaak zal ik een vage lijn gebruiken om de grens te benadrukken en de twee delen duidelijker te laten lijken.
kleur
Kleur kan ook een groot verschil maken in het verscherpen van dingen. In dit geval heb ik de achtergrond desaturated van een soort van off-grijs / groen naar puur grijs. Dit betekent dat de kluis, die een groenige tint heeft, meer op de achtergrond opvalt en er scherper uitziet.
Objecten opruimen
Iets anders dat ik in deze afbeelding niet heb gedaan, maar dat je wel kunt doen om dingen aan te scherpen, is om door objecten zoals het logo of de kluis te gaan en ervoor te zorgen dat randen zijn uitgelijnd met pixels. Bekijk bijvoorbeeld de linkerkant van de kluis in vergelijking met de rechterrand. Je zult zien dat de rechterrand er enigszins wazig uitziet. We kunnen dit oplossen door de veelhoekige lasso-tool (L) te gebruiken en een klein randje aan de rechterkant te selecteren en op Verwijderen te drukken. Dit is natuurlijk niet essentieel en het is niet mijn bedoeling om nep-kieskeurig te klinken, maar het is een goed idee om na te denken over deze details en ervoor te zorgen dat alles mooi en helder is!

Een ander element dat hier besproken moet worden, is dat u op de tekst een zwak verloop / lijneffect ziet. Dit wordt bereikt met twee laagstijlen, een binnenste slag van 1px en een subtiel verloop. Ik heb dit hier gebruikt omdat het deel uitmaakt van het merk FreelanceSwitch en het is ook nogal een Web 2.0-effect. Het is het beste gedaan met Sharp-tekst zoals eerder vermeld. U kunt de exacte laagstijlen hieronder bekijken in de voorbeeld-PSD.

Stap 2 - Licht en schaduw:

Verlopen, verlopen, verlopen. Sommigen zouden zeggen dat ze het kenmerk zijn van Web 2.0-ontwerp en ik moet toegeven dat ik ze constant in mijn ontwerpen gebruik. In de onderstaande afbeelding ziet u dat ik op een paar verschillende plaatsen schaduwen en verlopen heb toegevoegd om het ontwerp meer diepte te geven.

Een van de belangrijkste verschillen tussen print en webdesign is naar mijn mening de hoeveelheid diepte die je nodig hebt in je ontwerp. Wat ik hiermee bedoel, is dat als je in het ontwerp een brochure hebt met een rechte, effen kleur, vaak ziet het er nog steeds mooi uit vanwege de papierstapel of een celloglaze die kan worden aangebracht en de reactie van het licht naar dat papier / coating. Dus in het 'ontwerp' ziet het eruit als een eenvoudige platte kleur, maar in de uitvoer heeft het toch diepte. Op het scherm heb je dit effect niet.

Dit wil niet zeggen dat je geen platte achtergronden of kleurvlakken in webdesign mag hebben, maar alle printontwerpers die ik ooit heb gebruikt om websites te maken, de meest voorkomende twee fouten die ik heb opgemerkt zijn

Niet focussen op scherpte en helderheid van het ontwerp
In gedrukte vorm zoom je zelden recht in om individuele pixels aan te passen, want wanneer iets wordt afgedrukt, zal dat detailniveau toch vaak aan het oog ontsnappen. Je denkt in millimeters geen pixels.
Geen dieptecues toevoegen en voldoende visuele interesse
Verlopen werken over het algemeen niet zo goed in de afdruk, maar op het scherm werken ze leuk. Evenzo werken zwakke schaduwen en hooglichten goed op het scherm. Samen kunnen ze een site visueel aantrekkelijker maken omdat de verschillende elementen op het scherm tegen elkaar spelen. In de afbeelding hieronder kregen de geldzakken, die aanvankelijk rechte vectorafbeeldingen waren met een vlakke kleur, zeer subtiele schaalverdelingen met behulp van de Burn Tool (O), zodat ze er zachter uitzagen..

Stap 3 - Prioriteit:

Voorrang is het allerbelangrijkste visuele aspect van informatieontwerp. En aangezien webontwerp grotendeels gaat over hoe u uw gebruiker informatie presenteert en presenteert, is voorrang daarom van het grootste belang.

Wat bedoel ik met voorrang? Nou, als je naar een pagina kijkt, moet je jezelf afvragen, waar kijk ik eerst naar, wat komt er hierna, wat is daarna, enzovoort. En waarom bekijk je bepaalde dingen in een bepaalde volgorde?

Visuele voorrang is een mix van factoren:

Grootte
Het is vrij duidelijk dat iets groots voorrang zal krijgen op iets kleins. Dus in dit ontwerp hebben de kluis en de hoofdtitel voorrang boven alles. Als je naar de pagina kijkt, valt het eerste wat je opvalt die twee elementen aan.
Kleur
Kleur creëert ook voorrang. Bijvoorbeeld, in de afbeelding vóór ziet u dat de ondertitels in het gebied met 4 in die afbeelding hieronder aanvankelijk hetzelfde donkerblauw waren als de woorden Hallo daar! Dit betekende dat er minder onderscheid tussen de twee was en het was niet zo duidelijk wat eerst bedoeld was. Door ze te laten vervagen tot een beige, krijgen ze minder belang en ligt het meer voor de hand dat ze minder belangrijk zijn in de informatiehiërarchie.
Achtergrond kleur
Met zowel achtergrondkleur als kleur in het algemeen, is het belangrijkste niet zozeer welke specifieke kleur iets is als welke kleuren al het andere in relatie staat. Dus bijvoorbeeld, als alles zwart is op een pagina en er is een wit object, dan zal dat witte object duidelijk naar je toe springen. In dit geval krijgen we de nadruk door helder geel te contrasteren met het donkergrijs. Dus hoewel het allereerste ding op de pagina dat je ziet misschien de kluis en de woorden zijn Passief inkomen maken, zul je waarschijnlijk opmerken Een gids voor volgende, en de Deel 1 | Deel 2 |... navigatie als tweede. Dit is expres omdat ik wil dat de gebruiker eerst een visueel beeld en een titel ziet, zodat ze weten waar ze naar kijken, dan wil ik dat ze de primaire navigatie zien zodat ze begrijpen hoe ze de site kunnen omzeilen.
Positie
Eindelijk position in de lay-out maakt ook een verschil in hoe items worden waargenomen. Zoals je waarschijnlijk hebt gehoord, tonen onderzoeken aan dat het oog van de gebruiker in een bepaalde variatie van linksboven naar rechtsonder loopt (ik heb beide studies gezien die zeggen dat het linksboven naar rechtsboven gaat en dan van links naar rechtsonder, en afwisselend dat het gaat in een soort boog van hoek naar hoek.) Het belangrijkste is hier dat het hebben van iets hogers meestal meer voorrang geeft, en als je iets meer links hebt, krijg je meestal meer voorrang.

Stap 4:

Ik heb het al eerder gezegd, ik zeg het nog een keer ... het draait allemaal om de pixels!

In deze afbeelding ziet u wat een vrij rechtlijnige overgang lijkt. In feite zijn er drie gradiënten getekend en drie 1-pixellijnen gebruikt. Het is vrij subtiel en maakt ongetwijfeld niet zoveel verschil, maar naar mijn mening telt elk detail tegen het einde.

Stap 5:

Iemand in de opmerkingen vroeg naar Web 2.0 soorten stijlen. Hier is een eenvoudig effect waarbij u een omtrek van 1 of 2 pixels en vervolgens een vage hiërarchie voor een achtergrond geeft. Als je het al niet eerder had gemerkt, zul je je gaan realiseren dat het overal is, mogelijk een beetje over-gebruikt, maar toch leuk.

Stap 6:

In deze afbeelding kunt u zien hoe u tijdens het polijsten soms zelfs de feitelijke informatie op de pagina wijzigt. In dit geval besloot ik dat, hoewel het meer immens rijk was om alle titels voor de verschillende delen onder de geldzakken te hebben, het er zo rommelig uitzag dat ik het niet bijzonder informatief vond, hoewel dit enigszins betwistbaar is. Dus in plaats daarvan heb ik het overtollige bruin op bruine tekst verwijderd en vervangen door vet geel op donkergrijs, wat vanwege het contrast eruit springt.

En daar heb je het!

Dus er is mijn eerste webontwerp-tutorial. Laat het me weten in de comments als dit informatief is. Het is een uitdaging om Webdesign uit te leggen! Houd er ook rekening mee dat mijn stijl van webdesign natuurlijk mijn smaak is, vooral omdat ik mijn eigen klant ben in 99% van de projecten die ik tegenwoordig doe :-)

De volgende keer dat ik een website heb om te ontwerpen, ben ik van plan het hele ding op te nemen met een schermopname-programma en het dan in een paar minuten te versnellen. Dus daar mag je naar uitkijken! Ik denk dat het best cool zal zijn, hoewel ik een beetje nerveus ben omdat het zoals elke ontwerper op sommige dagen gemakkelijk wordt, en op sommige dagen is het een lege lei binnenin.

Hoe dan ook, hoop dat je de tutorial leuk vond. Geef het alsjeblieft een Digg!

Voorbeeld PSD

Een korte opmerking over deze PSD, ik heb geen van de lagen gelabeld of gegroepeerd. Dit is vrij letterlijk de PSD die ik de site heb gebouwd die ik heb dichtgeritst zodat je er doorheen kunt kijken. Het ontwerp en de inhoud van de PSD worden verstrekt puur voor instructiedoeleinden. Het auteursrecht voor het ontwerp en de illustraties berust bij de respectieve eigenaren. Gebruik geen elementen van het ontwerp ergens anders.

Download de PSD voor deze zelfstudie

Ontwerp & illustratie