De samengestelde delen van uw ontwerp begrijpen

In dit artikel gaan we kijken naar een eenvoudige analogie die effectieve manieren van communiceren door middel van ontwerp zal illustreren. Zodra we het idee hebben vastgesteld, zullen we enkele bekende voorbeelden bekijken om het punt naar huis te rijden.

De analogie waar we naar gaan kijken is The Fourier Transform, een intrigerende wiskundige tool genaamd naar de Fransman Joseph Fourier.

Om te beginnen zou het kunnen falen om indruk op je te maken met zijn complexe (en schijnbaar saaie) vergelijkingen. Maar, diep verborgen in deze vergelijkingen, is een eenvoudig idee: dat elke golf of tijdgebaseerd signaal kan worden opgesplitst in vele andere golven, die het origineel vormen. Met andere woorden, het geeft de individuele ingrediënten aan die in het eindproduct gaan zitten.

De Fourier-transformatie heeft toepassingen variërend van kernmagnetische resonantie (NMR) tot MP3-compressie, maar we gaan het toepassen op iets vertrouwder: design.


Afbeeldingsbron: Wikipedia
Joseph Fourier, afbeelding vrijgegeven in het publieke domein door de auteur, Bunzil

U bent bijvoorbeeld van plan een website te maken wanneer u een concept hebt dat aan gebruikers moet worden doorgegeven. Jouw taak, als webdesigner, is om een ​​webpagina te maken die dit idee in bruikbare stukjes breekt; stukjes beeld, stukjes tekst of zelfs video's die door een bezoeker worden gebruikt om het idee in gedachten weer te geven.

Denk aan de rode blokgolf in de bovenstaande afbeelding als zijnde het idee of bericht dat u via uw website wilt overbrengen. Elke blauwe golf, hoewel ze er compleet anders uitzien wanneer ze afzonderlijk worden genomen, draagt ​​bij aan het creëren van de rode golf op de een of andere manier in combinatie met de andere blauwe golven. Het is jouw taak om de 'blauwe golven' (de samengestelde elementen) van je hoofdboodschap te achterhalen. Helaas, als we daar maar een formule voor hadden!

Uiteindelijk, als de bezoeker het doel van uw website volledig begrijpt en er vertrouwen in heeft om het te gebruiken, dan bent u geslaagd in uw rol als ontwerper.


Ontwerp om inhoud te omarmen, geen rommel

Apple's nieuwste iOS 7, hoewel met gemengde reacties over de nieuwe kleuren, esthetiek, iconografie en typografie ontvangen, is een positieve stap voorwaarts. Als iPhone-gebruiker vind ik het nieuwste softwareaanbod van Apple een veel bruikbare en aangenamere ervaring dan zijn voorganger. Ik kan me niet voorstellen terug te gaan naar iOS 6 nu ik gewend ben aan de nieuwe interface. Dit wordt toegeschreven aan meer dan alleen parallax-effecten, animaties en andere eye candy. Een van de belangrijkste redenen waarom iOS 7 zo bruikbaar is, is dat het inhoud omvat, in plaats van het in een skeuomorfe huid te verpakken. Apple noemt deze aanpak "Deference".

Deference - De gebruikersinterface helpt gebruikers de inhoud te begrijpen en ermee om te gaan, maar concurreert er nooit mee - iOS Human Interface Guidelines

Op de eerste pagina van de ontwerpgids spreekt een zij aan zij-schermafbeelding van de native Weather-app in iOS 6 en iOS 7 voor zichzelf; het ontwerp omarmt de inhoud. U hoeft geen woord te lezen om direct over het huidige weer te worden geïnformeerd. Elk detail moet de boodschap uitdrukken.


Zorg ervoor dat u bij het ontwerpen van uw perfecte website elk detail goed overdenkt. Elk onderdeel dat het verzint; typografie, kleur, beeldspraak, elk detail tot aan de favicon, moeten constructief bijdragen, in perfecte harmonie samenwerken om je boodschap effectief af te leveren.

Contraproductieve details

Ik heb me vaak afgevraagd waarom sommige websites prominent een "feedback" -knop direct op de voorpagina plaatsen. Hoewel het absoluut noodzakelijk is om feedback op uw werk te krijgen, geef nooit de indruk dat u niet zeker bent en niet overtuigd. Denk er zo over na: wanneer u gaat winkelen, is u ooit de vraag gesteld: "Wat vindt u van onze winkelverlichting en verf?" juist als je een winkel binnenstapt? Dergelijke details zijn in essentie onzichtbaar voor ons. Goede winkelverlichting en de algemene sfeer van de winkel worden door ons niet bewust verwerkt.

Door dat te zeggen, ontvangen uw hersenen voortdurend informatie van uw ogen en andere sensorische organen over de omgeving om u heen. Een goede winkelomgeving zou zeker van invloed zijn op het niet kopen van een product van hen. Terugkomend op het onderwerp, Feedback links moeten toegankelijk zijn, maar weggestopt. Gmail doet het goed:


Stel uzelf twee vragen bij het toevoegen van iets aan uw website:

  • Helpt dit mijn bezoekers het doel van mijn website te begrijpen??
  • Is er een betere manier om dit te doen?

Perfectie wordt bereikt, niet wanneer er niets meer aan toe te voegen is, maar wanneer er niets meer over is om mee te nemen

Antoine de Saint - Exupe

minimalisme

Google is altijd al een meester in minimalisme in design geweest. Een recente update heeft de donkere balk van hun startpagina verwijderd, omdat mensen naar Google.com gaan om te zoeken, niet om afgeleid te worden door andere producten die Google te bieden heeft. Deze extra balk heeft nooit iets bijgedragen aan de hoofdboodschap van hun zoekmachine: zoek op het web. In plaats daarvan zijn deze links nu netjes geplaatst in een vervolgkeuzemenu, zodat geïnteresseerde gebruikers een kijkje kunnen nemen en kunnen navigeren waar nodig.


GoodUI.org is een uitstekende compilatie van 32 ideeën van Jakub Linowski die u zullen helpen een goede en bruikbare gebruikersinterface te bouwen. De eerste tip is dat je een lay-out met één kolom moet proberen in plaats van een lay-out met meerdere kolommen. De reden voor dit argument is dat je hierdoor je lezers van boven naar beneden op een meer voorspelbare manier kunt leiden, terwijl een aanpak met meerdere kolommen extra risico's inhoudt om af te leiden naar het kerndoel van een pagina.

Veelkleurige lay-outs worden al eeuwen in print gebruikt en ze werken goed. Neem het geval van The New York Times of Mashable. De inhoud bestaat uit een verzameling artikelen (of nieuwsitems) met elk een prominente titel. Ze hebben geen kernboodschap voor hun bezoekers, maar een verzameling informatie voor hen en hun interfaces leveren dit effectief op.

Een lay-out met één kolom leidt uw lezers op een voorspelbare manier, zonder het risico te lopen hen af ​​te leiden van het belangrijkste doel van een pagina

GoodUI.org


Afbeeldingsbron: Goodui.org

Ontwerp om beter uit te drukken

Bekijk dit eenvoudige diagram, dat ik gebruik om "expressie" weer te geven:


De binnenste cirkel vertegenwoordigt wat je uitdrukt aan anderen en de buitenste cirkel is de boodschap die je hebt van plan zijn uitdrukken. Dit is niet alleen van toepassing op webdesign, sterker nog, dit concept zal u helpen uw communicatievaardigheden in het algemeen te verbeteren. Wanneer je een idee probeert uit te drukken of een idee aan anderen wilt overbrengen, probeer dan je best om de inner circle te vergroten. Evalueer jezelf en probeer jezelf in de schoenen van je publiek te plaatsen. Hoeveel van uw bedoelde boodschap drukt u eigenlijk uit??

De Portfolio van Calm Digital is een goed voorbeeld van hoe het mogelijk is om een ​​kernidee effectief uit te drukken. In dit geval is het eerste wat je opvalt het woord "kalm" geschreven in enorme Sans-Serif letters tegen een blauwe achtergrond. Het contrast tussen het gebruikte wit en blauw is perfect; niet te veel en niet te weinig, gewoon rustig genoeg. De kleur blauw is bekend voor het bevorderen van gevoelens van kalmte en sereniteit.


Schroom niet elke mogelijkheid die je kan helpen om dingen beter uit te drukken. Internetverbindingen zijn sneller dan vroeger, browsers zijn veel krachtiger en capabeler en rijke technologieën zoals HTML5, CSS3 etc. geven webontwikkelaars meer kracht dan ooit. Voorbij zijn de dagen dat je beperkt was tot het maken van statische pagina's. Schroom niet om de nieuwste reeks gereedschappen en technologie te gebruiken als het u kan helpen uw boodschap beter over te brengen naar uw bezoekers. Ik benadruk de tweede helft van die zin: als het u kan helpen uw boodschap beter over te brengen naar uw bezoekers.

Nog maar een paar jaar geleden konden we ons niet voorstellen dat een volledig ontwikkelde video de achtergrond van een website zou zijn. Maar, kijk, het is tegenwoordig niet ongewoon. Er is geen betere manier om de ervaring van het gebruik van een tablet dan een video over te brengen. Dit is precies wat Google heeft gedaan voor hun Nexus 7-website. Als u op een knop klikt, komt u precies in het midden van de Nexus-ervaring.


Spotify gaat een stap verder en speelt automatisch een video op de achtergrond. Het is boeiend ...


De website van ontwerper Fernando Maclen gebruikt een wazige video op de achtergrond die hem op het werk laat zien. De hele pagina blijft trouw aan het bijschrift "Superb simplicity".



Conclusie

Laten we kort ingaan op wat we in dit artikel hebben behandeld:

  • De Fourier-transformatie is een eenvoudig maar effectief idee en informeert ons over de afzonderlijke ingrediënten die een eindproduct maken. Dit simpele idee om een ​​hoofdboodschap te verdelen in kleine componenten is wat een webontwerper moet doen.
  • Ontwerp om inhoud te omarmen, geen rommel. Elk detail, tot en met de favicon, moet helpen de boodschap van de inhoud uit te drukken.
  • Ontwerp om uit te drukken. Schroom niet om die extra stap te zetten om uw idee op een betere manier uit te drukken. Gebruik de nieuwste en beste die technologie te bieden heeft, als u denkt dat dit u zal helpen om effectiever uit te drukken.

Ik hoop dat je dit artikel leuk vond, bedankt voor het lezen!