7 Tips voor het ontwerpen van schone en moderne websites
Schoon, elegant en mooi webdesign is vaak een kwestie van persoonlijk perspectief. Ik kijk elke week naar honderden websites en verschillende daarvan vallen mij op, maar niet alle zijn noodzakelijkerwijs effectief.
Te vaak zetten ontwerpers een concept te ver door en produceren ze een definitief ontwerp dat niets anders is dan tekst en een raster. Hoewel deze minimalistische ontwerpen hun esthetische aantrekkingskracht hebben, met name in combinatie met uitstekende typografie, lopen ze het risico om niet op te vallen.
Persoonlijke meningen buiten beschouwing gelaten, zijn er bepaalde kenmerken van een ontwerp die het mogelijk maken trots als schoon of modern te worden bestempeld en de bruikbaarheid en sympathie op een universeel niveau te verbeteren. Eenvoud is geen ontwerptrend, maar eerder een kenmerk van goed ontwerp.
Photoshop biedt ons een veelzijdige set hulpmiddelen om diepte en interesse te creëren en nodigt ons uit subtiele details te integreren waar we een lege ruimte zouden laten. U hebt slechts een handvol van deze tools nodig om de kwaliteiten van modern design in een lay-out te integreren. Door ze te beheersen, kunt u schone ontwerpen maken die functionaliteit duidelijk en effectief uitdrukken.
1. Ruimte
Witte ruimte maakt de visuele scheiding van ontwerpelementen mogelijk zonder het gebruik van dozen, lijnen of extra afbeeldingen en is mogelijk het belangrijkste aspect van modern ontwerp. Het is essentieel voor de presentatie en leesbaarheid van de inhoud. Correct gebruik geeft witte ruimte uw indeling een schoon en elegant gevoel.
Gidsen en rasters zijn beschikbaar in Photoshop om u te helpen elementen precies te positioneren. Het raster overlapt uw gehele document terwijl de hulplijnen handmatig kunnen worden ingesteld. Gebruik richtlijnen vroeg om onzichtbare randen, marges en opvulling in te stellen die worden gebruikt om uw witruimte te definiëren.
Maak een gids door op Ctrl + R (Win) of Cmd + R (Mac) te drukken om de liniaal in te schakelen en klik vervolgens op de bovenste of linker liniaal om een hulplijn naar de gewenste positie te slepen. Hier zijn enkele extra snelkoppelingen om u te helpen gidsen te beheren terwijl u werkt:
- Om een richtlijn te verplaatsen: Ctrl (Win) of Cmd (Mac) en klik op de gids
- Hulplijnen tonen / verbergen: druk op Ctrl +; (Win) of Cmd +; (Mac)
- Toon / verberg het raster: druk op Ctrl + '(Win) of Cmd +' (Mac)
Schakel uw slimme handleidingen in via Beeld> Tonen> Slimme handleidingen . Slimme hulplijnen worden automatisch weergegeven wanneer u een vorm tekent, tekst uitlijnt of een selectie of dia maakt en u van tevoren het werk van het instellen van richtlijnen voor deze elementen bespaart.
Het uitlijnen van objecten met behulp van hulplijnen en rasters maakt uw ontwerp gemakkelijker te verteren en geeft het algehele resultaat een meer gepolijst uiterlijk.
2. Diepte
Diepte gecreëerd met licht en schaduw zorgt ervoor dat je elementen helder en echt lijken. Schaduweffecten kunnen op elke object-, selectie- of tekstlaag worden toegepast, maar het is de kunst om een kleur te kiezen die overeenkomt met de achtergrond en af te zien van het standaardzwart.
Niet alle schaduwen moeten donker zijn. Combineer het effect Inner Shadow met een witte of lichtgekleurde slagschaduw om een gezonken of "letterpress" gevoel te creëren met tekst- of formuliervelden.
3. Detail
Zowel het verloopgereedschap als de gradiëntlaageffecten spelen een grote rol in een schoon en modern ontwerp. Overgangen zijn aanwezig in elk aspect van de moderne stijl, van schaduwen en hooglichten tot achtergronden en knoppen.
Gebruik Shift + G om toegang te krijgen tot het verloopgereedschap. Als u een verloop wilt maken, klikt u op het canvas, sleept u en laat u los. Deze tool kan het beste worden gebruikt voor grote gebieden zoals achtergronden, lichten of radiale schaduwen. Wanneer u met afzonderlijke elementen zoals secties, knoppen of pictogrammen werkt, is het effect Laaglaagoverlapping een efficiëntere manier om oppervlaktestijlen of -structuren vast te stellen. Dit gereedschap is toegankelijk door te dubbelklikken op de elementlaag en het selectievakje "Overlappende overgangen" in te schakelen.
Gebruik dit effect om een subtiele dimensie te geven aan uw knoppen en navigatiebalken, of om de stijl en textuur van papier of metalen na te bootsen.
4. Definitie
Door randen en randen te definiëren, zorgt u ervoor dat uw elementen een goed contrast hebben.
Het effect Lagen laag geeft elementen weer zoals tekst of knoppen, waarbij u aan alle zijden een gelijkwaardige omtrek nodig hebt. Als je dit effect gebruikt, worden de schaduwen binnen en de slagschaduw vrijgemaakt om je opties uit te breiden.
Het is verleidelijk om naar het pengereedschap te gaan om rechte lijnen en horizontale regels te tekenen, maar als u hellingen of schaduwen op de lijn wilt toepassen, is het gemakkelijker om het gereedschap Selectiekader met enkele rij te gebruiken, dat discreet achter het Rechthoekige selectiekader is verborgen . Gebruik het gereedschap Enkele rij op een nieuwe laag en een witte of lichtgekleurde slagschaduw om markeringslijnen langs sectieranden of scheidingstekens te maken, waar u geen effect op het element zelf kunt toepassen.
5. Interesse
Schoon en modern hoeft niet saai, wit of minimaal te zijn. Door slim gebruik te maken van textuur en patroon valt je ontwerp op en communiceer je stijl en merk. Gebruik subtiele technieken zoals het toevoegen van ruis (Filter> Ruis toevoegen) of het laageffect Textuureffect op achtergrondgebieden of interface-elementen om ze uit elkaar te helpen. Hoe realistischer en duidelijker een element wordt weergegeven, des te aantrekkelijker is het voor de kijker.
6. Perspectief
Perspectief is de meest onderbenutte techniek in modern webdesign, simpelweg omdat voortdurende trends zich consequent richten op symmetrie en rasters. Door het toepassen van perspectief op afbeeldingen en elementen in uw ontwerp, kunt u diepte, dimensie, modernisme en interesse in uw ontwerp introduceren in één eenvoudige stap.
Perspectief kan aan elke vorm of afbeelding worden gegeven door de optie "Vrije transformatiepad" in het snelmenu te kiezen en op de knop "Verdraaien" op de balk met toolopties te klikken.
De illusie van perspectief kan ook worden geproduceerd door asymmetrische vormen of frames te maken en op de juiste manier hellingen en schaduwen te gebruiken om de objecten uit elkaar te plaatsen.
7. Leesbaarheid
Een sterk type is zeer geliefd in de ontwerpgemeenschap en een nog sterker onderdeel van een schoon ontwerp. Het kan afbeeldingen en grafische afbeeldingen vervangen die anders een ontwerp te ingewikkeld maken en de totale essentie van de bovenstaande technieken op een eenvoudige en duidelijke manier overbrengen.
Als u texturen aan tekst wilt toevoegen, converteert u eerst uw tekstlaag naar een slim object door met de rechtermuisknop op de laag te klikken en 'Converteren naar slim object' te kiezen. Standaard zijn er laageffecten tenzij uw tekst is gerasterd, een praktijk die u wilt vermijden. zelfs bij het ontwerpen voor het scherm. Door te converteren naar Smart Objects kun je filters en andere technieken toepassen op de tekst, terwijl je je bewerkingsmogelijkheden behoudt, in het geval dat je de tekst later nog moet veranderen.
Houd er rekening mee dat u bij het instellen van tekstelementen over volg- en kerning-opties beschikt. Zelfs als uw tekst bestemd is om te worden gereproduceerd in CSS, moet u al snel experimenteren met regel- en letterafstand om beter te visualiseren hoe uw inhoud zal verschijnen in de ruimte die u hem hebt gegeven. Vergeet ook niet de tekst "Scherp" of "Scherp" te gebruiken om de definitie en duidelijkheid te behouden.
Hoe u uw inhoud in een strak ontwerp presenteert, is belangrijker dan welke andere stijl dan ook, simpelweg omdat er minder visueel gebeurt om de kijker af te leiden. Door de bovenstaande tips te gebruiken om tekst en objecten op de juiste plaats te plaatsen, definitie en interesse toe te voegen en de inhoud van de interface te onderscheiden, zal uw ontwerp optimale effectiviteit bereiken.
Wat vind je van deze tips en heb je anderen die je regelmatig gebruikt? Gelieve hieronder te delen ...