De 3 componenten van goed webdesign

Een goed ontwerp gaat niet alleen om mooie looks, en nergens is dit meer waar dan in webdesign. In feite is het logisch om te denken dat webontwerp bestaat uit drie belangrijke niet-technische componenten: esthetisch ontwerp, informatieontwerp en interfaceontwerp. Als u een geweldige webontwerper wilt zijn, is het essentieel dat u alle drie goed begrijpt.

Dit bericht is dag 2 van onze webdesignsessie. Sessiedag 1 sessie sessie 3 van Creative Sessions

Esthetisch ontwerp

Bij esthetisch design gaat het erom de look goed te krijgen. Als u hierin goed bent, betekent dit dat u sites kunt ontwerpen die er niet alleen goed uitzien, maar ook zijn op gepaste wijze ontworpen. Verschillende ontwerpen brengen verschillende berichten over naar een eindgebruiker, dus het is essentieel dat een ontwerp overeenkomt met het bericht van de site.

Onlangs liep ik door een supermarkt en zag een sapmerk met het visuele ontwerp van een wasmiddel. Er was gewoon iets aan de manier waarop de doos klaar was, dat ik me even afvroeg waarom er wasmiddel in de gang van vruchtensap zat. Op dezelfde manier is het een slecht eindresultaat als een website een ongepaste verpakking is voor de inhoud en de boodschap, ook al is het een heel goed uitziend pakket. Daarom is het erg belangrijk als webdesigner om niet blindelings trends en trends te volgen. Je moet altijd denken, niet alleen hoe je een site-ontwerp er goed uit kunt laten zien, maar er ook passend uit kunt zien.

Van de drie componenten van webdesign, is esthetisch ontwerp zeker degene die mensen het meest identificeren wezen ontwerp. Een ding dat ik interessant vind aan esthetisch ontwerp is dat het bedrieglijk moeilijk is. Ik herinner me dat ik ooit een poster heb ontworpen en deze heb laten zien aan een vriend die heeft gereageerd "oh het is maar een paar regels en wat tekst, je moet dit in ongeveer tien minuten hebben gedaan" - ah de geneugten van een ontwerper te zijn!


Informatie ontwerp

Bij informatie-ontwerp gaat het om het zo goed mogelijk voorbereiden van de informatie op een website, zodat gebruikers informatie efficiënt en effectief kunnen vinden en verteren. In grotere sites wordt alleen het vinden van informatie een uitdaging, maar op zowel grote als kleine sites is het altijd een ontwerpprobleem.

Een snel voorbeeld van informatieontwerp is de manier waarop u tekst op een pagina organiseert en opmaakt. Omdat mensen de neiging hebben om door inhoud op een scherm te bladeren, is het veel beter om het te organiseren met koppen en subkoppen, diagrammen en visuele haken en algemene variatie voor het oog. Dergelijke technieken maken de informatie op een pagina veel gemakkelijker te verteren. Maar het ontwerpen van informatie is niet beperkt tot wat er op een enkele pagina staat, het gaat ook over welke structuren u gebruikt om de onderdelen van de site onder te brengen, hoe u de menu's en submenu's opmaakt en hoe u verschillende secties koppelt.

Wellicht bent u geïnteresseerd om te weten dat in grotere en complexere projecten en sites er in feite een volledig beroep is gewijd aan het modelleren en structureren van informatie, Information Architecture. De bekendste informatiearchitect die ik ken is Jesse James Garrett die overigens de term AJAX bedacht. Hij is behoorlijk netjes en je kunt over hem lezen op Wikipedia.


Collis 'Awesome Diagram

Omdat we het hebben over informatieontwerp, lijkt het een goede gelegenheid om 6 alinea's van wafeltekst in een diagram te veranderen, dus ik presenteer u mijn geweldige diagram van de componenten van webontwerp! Koesteren in zijn rode en grijze awesomeness!


Interface ontwerp

Interfaceontwerp is de opstelling en samenstelling van hoe een gebruiker kan communiceren met een site. De woordinterface betekent een punt of oppervlak waarop twee dingen elkaar raken. Dus een webgebruikersinterface is waar een persoon en een website elkaar raken - dus menu's, componenten, formulieren en alle andere manieren waarop u met een website kunt communiceren.

Een goed interfaceontwerp gaat over het eenvoudig, effectief en intuïtief maken van de ervaring van het gebruik van een website. Het is eigenlijk veel gemakkelijker om een ​​slecht interfaceontwerp te demonstreren, want dan merk je het echt. Een eenvoudig voorbeeld van interfaceontwerp is het gebruik van pictogrammen. Heb je ooit naar een pictogram gekeken en gedacht "wat is dat bedoeld om te vertegenwoordigen ?!" - nou dat zou een slecht interfaceontwerp zijn. Het gebruik van pictogrammen om verschillende soorten inhoud of acties te labelen en aan te duiden, is slechts een onderdeel van het interfaceontwerp.

Overigens is een ander voorbeeld van interfaces die u waarschijnlijk zult tegenkomen als een webdesigner Application Programming Interfaces of API's. Een API is de verzameling functies en protocollen waarmee u (of uw programma nauwkeuriger) kunt communiceren met de API waarvoor het is bedoeld. Dus Google Maps biedt bijvoorbeeld een API die u kunt gebruiken om applicaties of sites te maken die werken met Google Maps.


Hoe zit het met…

Nu denk je misschien, dat is allemaal heel goed en goed Collis maar waar past CSS in? Of hoe zit het met Flash? Nou zoals ik al zei, dit zijn de drie niet-technische aspecten van webdesign. Aan de andere kant zijn er al die technologieën en vaardigheden zoals HTML / CSS, Flash, Javascript enzovoort. Maar ik heb de neiging om te denken dat ze meer een onderdeel zijn van webontwikkeling dan webontwerp. Op dezelfde manier dat het belangrijk is om HTML en CSS te scheiden om informatie en presentaties gescheiden te houden, zou je kunnen stellen dat hoe je een ontwerp maakt, in werkelijkheid verschilt van het ontwerp zelf. In eenvoudiger bewoordingen, is het weten van een specifieke CSS-hack alles wat met design te maken heeft?

Begrijp me niet verkeerd, je moet weten hoe je dingen moet bouwen om ze op de juiste manier te ontwerpen. Maar wat betreft het maken van webdesign, mijn antwoord blijft Interface Design, Information Design en Aesthetic Design.

Wat neem je? Heb ik een essentieel onderdeel van webdesign gemist? Of denk je dat webontwikkeling is een essentieel onderdeel van webdesign zelf?

Later deze week kun je meer diepgaande artikelen lezen over tips en trucs voor elk van deze drie componenten van webontwerp: interfaceontwerp, esthetisch ontwerp en informatieontwerp. In feite gaat de eerste binnen een paar korte uren omhoog.

Dit bericht is dag 2 van onze webdesignsessie. Sessiedag 1 sessie sessie 3 van Creative Sessions