Layout
Websites
Er zijn al veel bestaande producten, ik ben gaan kijken naar layouts met een kaart of aarde, dit is hoe ik denk dat de tool er uit gaat zien. Daarnaast ben ik ook gaan kijken hoe de navigatie is opgebouwd in een site. Hierbij wil ik vooral simpele layouts vinden die clean zijn.
Bewegen Bike Share
Dit voorbeeld van Bewegen (z.d) ziet er erg clean uit, de kaart is zo min mogelijk gedetailleerd. Op de kaart staan duidelijke pointers van alle locaties.
Er zijn wel veel verschillende elementen om mee te navigeren in de layout. Linksboven een hamburger menu, rechts boven en onder elementen die ook weer terug komen in het menu maar er ook los van staan. Dit lijkt mij een beetje onnodig.
De transitie naar het menu is wel cool, maar als de kaart het belangrijkst van de site was zou het niet handig zijn om de hele kaart te bedekken, bij deze website is dat niet het geval.
Earth 2050
Dit voorbeeld van Kaspersky (z.d) wordt ik erg enthousiast van. Het heeft een interessante layout, links voor 4/5 een wereldbol en voor 1/5 rechts een feed van nieuws. Dit zou handig gebruikt kunnen worden voor als er een beslissing is welke functies er in het overzicht komen.
Wat mij ook opviel is dat er een button midden boven is om te switchen van deze layout naar de feed. Rechtsboven zijn nog meer items om mee te navigeren door de site heen.
Spotify Listening Together
Bij de site van Spotify (z.d) is de interface heel minimaal, er is nergens een knop voor een menu. De items staan links onder naast elkaar. Rechts onder staan buttons om met social media te delen.
Ook hier zijn de pointers erg duidelijk weergegevens, dat komt ook dat ze op de aarde invliegen en een goede contrast hebben.
Google Maps
De layout van Google Maps (z.d) is de standaard wereldbol in het midden met een side menu. Hoe de navigatie werkt met het hamburger menu vind ik zelf niet heel handig, de twee menu's zitten over elkaar wat zorgt dat de een de ander een beetje verstopt.
Concepten
Door middel van Pinterest en Dribbble kom ik ook veel voorbeelden tegen, dit zijn meestal concepten. Maar dat wilt niet zeggen dat ik er geen inspiratie uit kan halen.
Alvogen
Dit concept van Copetto (2018) is eigenlijk het enige concept wat ik ben tegengekomen waar de inhoud ongeveer hetzelfde is als wat ik wil bereiken. Ook hier is weer een layout met links een gedeelte voor informatie, in dit geval de verschillende landen van de kantoren.
Deze layout is wel heel clean en er kunnen geen elementen elkaar overlappen. Dit zorgt dat alles heel duidelijk getoont kan worden.
Na even zoeken kwam ik erachter dat dit ook echt een website is, alleen het werkt niet zoals in het concept eruit ziet. De wereldbol is statisch en als je op een kantoor klikt, dan gebeurt er niks visueels behalve dat meer informatie getoond wordt.
Wel kon ik meer zien over de layout, de menu knop zit aan de hele rechterkant. Als je erop klikt komt er met een transitie het menu over het hele scherm.
Save the earth
Ook dit concept van Pham (2018) is een mooi voorbeeld van een layout die erg minimalistisch is maar toch werkt! Wat ik handig vind is dat er links ruimte is voor andere items die eventueel in mijn tool komen te zitten.
Het scroll gedeelte rechts vind ik ook erg handig om te browsen of voor een andere functie. Omdat het allemaal een geheel vormt, straalt het rust uit maar ziet er toch heel gelikt uit.
Bewegen. (z.d.). Bike Share Network. Geraadpleegd op 19 mei 2020, van https://bewegen.com/en/bike-share-network
Coppeto, M. (2018, 20 juni). Alvogen - Worldwide. Geraadpleegd op 20 mei 2020, van https://dribbble.com/shots/4704686-Alvogen-Worldwide
Google. (z.d.). Google Maps. Geraadpleegd op 22 mei 2020, van https://www.google.com/maps
Kaspersky. (z.d.). Earth 2050: A glimpse into the future | Kaspersky. Geraadpleegd op 19 mei 2020, van https://2050.earth/
Pham, M. (2018, 18 oktober). Save Earth. Geraadpleegd op 21 mei 2020, van https://dribbble.com/shots/5402558-Save-Earth
Spotify. (z.d.). Spotify: Listening Together. Geraadpleegd op 19 mei 2020, van https://listeningtogether.atspotify.com/
Last updated
Was this helpful?