We weten allemaal intuïtief wat een website er slecht uitziet: te veel gebruikte schuine effecten, afgezaagde illustraties, overvolle lay-outs. Deze ergernissen kunnen eenvoudig worden gecorrigeerd door te werken met de basisprincipes van het ontwerp - dezelfde principes die door professionele ontwerpers en kunstenaars worden gebruikt.
Geweldige websites brengen vorm en functie samen. In feite worden goed ontworpen websites als geloofwaardiger beschouwd, volgens a Stanford studie en zijn eigenlijk gemakkelijker te gebruiken (zoals onderzocht door onderzoeker Don Norman ). Hier zijn vijf basisprincipes die u helpen om kwaliteitsontwerp in de voorhoede van uw praktijk te houden.
In de ontwerpschool geven ze je een lijst met principes waaraan je moet voldoen om regels toe te wijzen aan schoonheidselementen zoals lay-out, volgorde en symmetrie. Maar naarmate je verder komt, krijg je te horen dat je de regels een beetje moet overtreden om plaatsen te creëren waar de kijker kan kijken door elementen zoals verscheidenheid, spanning of contrast te gebruiken.
Dit is een voorbeeld van een pagina Ik deed het in Edge Reflow CC. Kun je de verschillende ontwerpelementen zien die worden gebruikt en vervolgens worden gespeeld?
Er zijn enkele universele pictogrammen waarop mensen worden getraind om te reageren. Het vergrootglas (zoeken), het huis (startpagina) en de floppydisk (opslaan) zijn al ingebakken in uw gebruikers. Profiteer van die visuele snelkoppelingen ; al die verkeersborden zouden je onmiddellijk herkenbaar moeten zijn.
Kleur maakt het verschil, vooral omdat onze schermen beter worden op onze telefoons en tablets. Het is een facet van ontwerp dat een heel belangrijk onderdeel kan zijn van het verhaal dat uw website wil vertellen. Gebruik gewoon kleur om inhoud te ondersteunen, niet om een pagina te versieren. En vaak als u een foto gebruikt, moeten de kleuren in het ontwerp worden bemonsterd op basis van de gebruikte foto's, zodat uw ontwerp een mooi uniform gevoel heeft.
Ik vind het leuk om voorbeelden van kleuren te trekken met kleurstalen - en de Adobe Kuler De web-app is een geweldige manier om met verschillende thema's te spelen en ze vervolgens in uw ontwerptools te importeren. Een van de beste regels die daarbij hoort, is het gebruik van complementaire kleuren. Dat is in feite het gebruik van warme kleuren en koele kleuren samen om balans te bieden.
Er zijn letterlijk duizenden lettertypen om uit te kiezen.
Het is aan jou om te mixen en matchen - maar onthoud dat het de beste methode is om slechts maximaal drie lettertypen tegelijk te gebruiken - een leuk koplettertype, één voor het hoofdgedeelte van de tekst en vervolgens een voor elke vorm van call-out die je misschien nodig hebben. Vaak betekent dat dat je een schreefloos lettertype moet gebruiken voor de body-kopie en dat je voor koppen interessanter kunt worden met serif of sans-serif.
Oké, je hebt je basisontwerpelementen, met mooie pictogrammen en afbeeldingen, met een degelijk kleurenschema en leuke lettertypen. Wat is het volgende?
Hulp krijgen van anderen, natuurlijk! En niet zomaar willekeurige mensen op straat, maar constructieve kritiek van mensen die hun spullen echt kennen, zoals andere ontwerpers / ontwikkelaars. Dit kan van groot nut zijn om van een OK-website te gaan naar een website die echt populair is. Als u nog nooit Behance hebt gebruikt om een work-in-progress te plaatsen, raad ik aan om het eens te proberen. De actieve community zal meer doen dan alleen vertellen "om het logo groter te maken" - maar geef je advies dat het verschil kan maken tussen een goede website en een geweldige.
Om meer te weten te komen over het toepassen van ontwerpelementen op webontwikkeling, bekijk ik mijn presentatie vanuit SXSW: