20 stappen om de perfecte website lay-out

Bij het naderen van het onderwerp van het ontwerpen van een website lay-out, dacht ik na over veel voorkomende fouten die ik gezien heb in mijn jaren het ontwerpen, vooral met stagiaires en nieuwe ontwerpers vers van webdesign training.

Binnen deze korte lijst van stappen om de perfecte website lay-out, Ik streef ernaar om te dekken wat ik denk dat elke nieuwe website bouwer die werkzaam zijn binnen een digital agency moet weten en doen voordat het starten van een nieuw project, en wat ze moeten aandacht besteden aan tijdens het proces.

Deze principes niet alleen betrekking op het ontwerp aspecten als landing page design, maar ook algemene werkschema kwesties die de klus mooi gedaan. Volg ze en je zult al snel op uw manier aan het creëren van professionele website lay-outs.

Claudio Guglieri zal spreken naast David Navarro op Genereer Londen in september. Koop vandaag uw kaartje!

01. Zet je gedachten op papier eerste

Zeer eerste schetsen van een illustratie serie over steden over de hele wereld
Dit lijkt erg voor de hand liggend, maar ik heb te vaak dat ontwerpers springen meteen in Photoshop alvorens enige gedachte om het probleem dat ze proberen op te lossen gevonden. Het ontwerp is over het oplossen van problemen en die problemen kunnen niet worden opgelost door middel van gradiënten of schaduwen, maar door een goede lay-out en een duidelijke hiërarchie. Denk na over de inhoud, de lay-out en de functionaliteit voordat u begint met schaduwen vallen.

02. Start het schetsen van een top-level kader

Schetsen een basis draden zal u helpen om UX problemen op te lossen en de lay-out te structureren
Als ik gevraagd om een ​​look te creëren en te voelen voor een project, is het eerste wat ik doe come-up met een top-level kader dat al het ontwerp problemen oplost. Het kader is de gebruikersinterface dat de inhoud omringt en helpt om acties uit te voeren en te navigeren doorheen. Het omvat de navigatie en componenten zoals sidebars en onderkant bars.

Als u uw ontwerp te benaderen vanuit dit perspectief krijgt u een duidelijk inzicht in wat uw lay-out behoeften zal zijn bij het ontwerpen van delen buiten de homepage hebben.

03. Voeg een raster aan uw PSD

Het is zo simpel als het klinkt. Voordat u begint om iets in Photoshop ontwerpt u een goede raster om mee te beginnen nodig. Er zijn geen geldige excuses voor het starten zonder een rooster, en ja als je dat niet doet, kan ik u verzekeren op een of andere manier zal het ontwerp niet zo goed uitzien.

Een raster zal u helpen om de lay-out van de verschillende secties te structureren; het zal u begeleiden bij de specifieke eisen grootte van het scherm, en u helpen om responsieve sjablonen, consistent in termen van afstand, evenals vele andere design kwesties te zijn.

04. Kies je typografie

Een algemene vuistregel is om niet meer dan twee verschillende lettertypen gebruiken in een website lay-out
Het verkennen van verschillende lettertypes en kleuren maakt deel uit van de ontdekking fase van een project. Ik zou aanraden niet het gebruik van meer dan twee verschillende lettertypes in een website, maar het is echt afhankelijk van de aard ervan kon je min of meer te gebruiken. Over het algemeen kiezen voor een lettertype dat is gemakkelijk te lezen voor een lange hoeveelheid tekst en meer speels met titels en bellen om acties. Wees niet bang van het gebruik van grote lettertypes en over het algemeen zijn speels en consequent bij het gebruik van typografie zijn.

05. Kies je kleurenthema

Gebruik een beperkte set van kleuren en tinten te beschermen tegen overbelasting visuele
Gedurende het hele proces van het kiezen van een set van lettertypen te gebruiken moet je beginnen met het verkennen welke kleuren u wilt gebruiken in de gebruikersinterface, achtergronden en tekst. In termen van kleuren adviseer ik met behulp van een beperkte set van kleuren en tonen voor de algemene gebruikersinterface.

Het is belangrijk om die consequent toe te passen over de UI, afhankelijk van de functionaliteit van het element. Denk na over de lay-out van sites zoals Facebook, Twitter, Quora, en Vimeo. Naast de gebruikersinterface er moet een kleur beperking voor illustraties of grafische gegevens niet zolang ze niet interfereren met de functionaliteit van de componenten.

06. Verdeel de lay-out

Hoe eenvoudiger de structuur van de site, hoe makkelijker het is voor gebruikers om te navigeren
Elke sectie in uw site nodig heeft om een ​​verhaal te vertellen. Er moet een reden en een eindresultaat voor de gebruiker. De lay-out nodig om de inhoud te benadrukken wat zijn de meest belangrijke stukken in dat verhaal te helpen. In werkelijkheid moet er niet te veel call outs op een pagina, zodat alles moet rijden naar dat laatste “Wat kan ik doen hier”.

Denk na over de meest eenvoudige lay-out je je kunt voorstellen voor een eenvoudig doel en beginnen met het toevoegen van onderdelen die nodig zijn. Op het einde zul je verbazen hoe moeilijk is om het simpel te houden.

07. Heroverweeg de gevestigde

Hebben we echt meer nodig een zoekknop? In de meeste gevallen is het antwoord nee
Als ontwerpers vorm geven we de manier waarop gebruikers surfen op het internet, het is aan ons om te beslissen hoeveel stappen een eenvoudige actie zal nemen en hoe efficiënt onze site. Design patterns en conventies zijn daar omdat ze werken, maar soms zijn ze er zijn omdat niemand besteed genoeg tijd te evalueren of te heroverwegen. Het is belangrijk om de gevestigde interactieve patronen te heroverwegen op elke component en om te zien hoe we ze kunnen verbeteren.

zelf 08. Challenge

Ik moedig iedere ontwerper die er zijn om zichzelf uit te dagen op elk project. Innovatie komt niet altijd als een vereiste voor het project, dus het is aan ons om te komen met iets interactie of ontwerp gerelateerd. Voorbeelden van verschillende uitdagingen kan onder meer met behulp van een nieuw grid-systeem, het creëren van een nieuw onderdeel, of zelfs minder belangrijke uitdagingen, zoals het vermijden van blend modes of met behulp van een specifieke kleur.

09. Let op de gegevens

Spel work in progress: detailweergave
Deze verklaring is de laatste tijd veel gebruikt, maar het is niet altijd zichtbaar in het eindproduct. Afhankelijk van het concept achter het project, dat ‘liefde’ kon op verschillende manieren komen.

Het kan een kleine interactie, een onverwachte animatie of een esthetische keer als een kleine helling in een knop of een subtiele slag rond een box aan het veld voor. Maar over het algemeen dit contact is essentieel en ook natuurlijk als je echt genieten van wat je doet.

10. Behandel elke component, alsof het zou kunnen worden voorgelegd aan een prijsvraag

Besteed aandacht aan elk onderdeel, en het geheel meer dan de som der delen
Ik moet toegeven dat dit stuk van advies is niet de mijne. Ik hoorde het in het verleden bij Fantasy Interactive en ik was geschokt door hoe helder en waar deze verklaring was. Elk onderdeel moet worden uitgevoerd als het alleen als de beste component ooit kon staan. Soms ontwerpers laten sommige delen van de website laatste op hun to-do lijst en tonen weinig respect voor hen op het einde.