7 Unieke ontwerpbeslissingen
Ik ben altijd op zoek naar inspiratie, voor een geweldig ontwerp dat conventies uitdaagt. Bij dit bericht gaat het om unieke lay-outoplossingen; dat betekent dat ik het over acht verschillende websites zal hebben die op een unieke manier iets typischs presenteren. We gaan met unieke lay-outoplossingen om producten te laten zien, persoonlijke en menselijke elementen in een website op te nemen.
1. Harvard vindt de beruchte carrousel opnieuw uit
Harvard's School of Design website heeft een unieke manier om navigatie te benaderen. Wanneer u voor het eerst op de startpagina terechtkomt, is er een visuele weergave van de navigatie. Natuurlijk is elke afzonderlijke link hier niet weergegeven, slechts een paar belangrijke. Veel websites hebben een koppeling gemaakt naar de meer belangrijke pagina's in de kop van de startpagina; dat is wat ons bijvoorbeeld carrousels bracht. Maar ik moet nog een andere website op deze manier presenteren. De navigatie kan klein zijn, maar hij bevindt zich vooraan en in het midden. Wat nog belangrijker is, het lijkt erop dat het daar thuishoort. Het is uitzonderlijk uitgevoerd.
De afbeeldingen aan de linkerkant overlappen elkaar, maar u kunt nog steeds zien hoeveel er zijn. Er is een duidelijke relatie tussen het beeld en de titels aan de linkerkant. De afbeeldingen roteren ten opzichte van de items aan de linkerkant. U weet echter op elk gewenst moment welke informatie voor u beschikbaar is. Het is alsof de Harvard School of Design een verbeterde versie heeft gemaakt van wat de carrousel in de eerste plaats had moeten zijn. Niet alleen wordt usability serieus genomen in deze ontwerpoplossing, ook de lay-out is uniek. Beide factoren samen zorgen voor een fantastisch visueel ontwerp.
2. Tra verdwijnt van het rooster
Dat is vrij duidelijk Tra De website maakt gebruik van een niet-traditionele lay-out. De website is over het algemeen minimaal. Ze gebruiken ook een omgekeerd kleurenschema waarbij de achtergrond zwart is en de tekst wit. Het kleurenschema geeft het zeker een wow-factor. Dit gaat echter over de lay-out van Tra's website. Laten we beginnen met de startpagina: er zijn een paar stukjes tekst op de startpagina, het grootste deel overlapt de achtergrondafbeelding op zijn minst een beetje, met uitzondering van de alinea-kopie van onder de sectie "We know people". De kopie is speciaal uitgelijnd om uit beeld te zijn. Het is anders, het is uniek, het is merkbaar.
Op de over-pagina is er een beetje meer volgorde en gebruik van een raster. Maar het raster is nog steeds onregelmatig. Het lijkt erop dat elk gedeelte van de betreffende pagina een eigen raster heeft. Wat mij het meest fascineerde aan deze pagina is de afgesneden afbeelding links bovenaan de webpagina. Het past gewoon nergens in. Dat maakt me natuurlijk nieuwsgierig. Het blijkt dat de afbeelding een galerij is - je moet erop klikken om de afbeeldingen te openen. Dat is een vrij slimme manier om gebruik te maken van een lay-out; mensen die willen onderzoeken, worden beloond met een heleboel afbeeldingen. De mensen die er niets om geven, verliezen niet zoveel verliezen. Het is een leuk paasei.
3. Scrolbare schoenfoto's binnen een vaste pagina
Dit voorbeeld van een unieke lay-outoplossing draait om een online schoenenwinkel. Feit De productpagina is gewoon geweldig. Allereerst maakt het ontwerp gebruik van de volledige breedte en hoogte van het scherm. Dat betekent dat elk gebied van het scherm is aangewezen met een specifiek doel. Ten tweede is de website eenvoudig, minimaal en schoon. Dat betekent dat hoewel het ontwerp het volledige scherm gebruikt, het niet rommelig is. Dat is een goede zaak, want veel ontwerp is afhankelijk van witruimte om een schone en licht ogende website te maken.
Het meest indrukwekkend bij deze specifieke productpagina is de indeling van de lay-out. De pagina is specifiek verdeeld in drie verschillende secties. Eerst is er de navigatie aan de linkerkant. Het is vrij standaard en niets bijzonders. Dan is er de rechterkant met de productdetails. Zowel de navigatie aan de linkerzijde als de sectie details zijn op het scherm vastgelegd. Maar de laatste sectie, de middelste fotosectie, is gevuld met schuifbare foto's. Ik vind het een briljante oplossing omdat het niet de meest gebruikelijke oplossing is.
Vaak, als er een grote lijst met productfoto's is, blijft de informatie erachter achter. Hier, terwijl ik naar beneden scrol, zie ik nog steeds de beschrijving en naam van het product, ik zie nog steeds de verschillende kleuren waarin het wordt geleverd en krijg toegang tot meer informatie, zoals details over het materiaal, zonder naar boven en naar beneden te scrollen. Over het algemeen is dit een naadloze ervaring voor een potentiële klant.
4. In één oogopslag meerdere zijden van een product laten zien
Hier hebben we een andere productpagina en een andere manier om een product weer te geven. Oké, prima, we hebben ook nog een ander schoenvoorbeeld! Afura De website heeft ook een unieke weergavemethode. Deze keer worden de schoenen getoond in meerdere verschillende schoten bovenop de pagina. Het maakt eigenlijk deel uit van een carrousel UI-element. De bruikbaarheid hier is echter geen groot probleem. Om te beginnen worden er standaard drie afbeeldingen weergegeven op een schermformaat van een desktop of laptop. De standaardafbeeldingen hebben allemaal dezelfde achtergrond, wat een mooie en naadloze weergave oplevert. Als een gebruiker niet beseft dat de afbeeldingen deel uitmaken van een carrousel, zien ze op zijn minst drie verschillende afbeeldingen van het product op hun computer. Voor kleinere schermformaten zoals tablets, is de standaardinstelling om twee afbeeldingen tegelijk weer te geven; dat is nog steeds redelijk goed. Al met al is de weergave van de schoenproducten hier een unieke ontwerpoplossing.
5. Opendoor pronkt met hun mensen
Ik geloof dat het web een onpersoonlijke plek is waar we de mens meestal niet zien; de echte mensen achter apps, producten, bedrijven enzovoort. Ik heb er altijd naar gestreefd om een menselijk element in mijn ontwerpen op te nemen. ik kan dat zien Geopende deur wil precies hetzelfde doen. Op hun startpagina, ongeveer halverwege, staat een sectie met de naam 'We hebben uw rug'. Het zou moeten verklaren dat er achter het bedrijf Opendoor echte mensen zijn die er zijn om hun klanten bij te staan bij elke stap van de weg. Nu had Opendoor het daar net achtergelaten, maar in plaats daarvan plaatsten ze een grote foto van een van hun medewerkers.
Dit gedeelte heeft heel weinig tekst. In plaats daarvan vormen de foto en het gezicht het grootste deel van het gedeelte. Ik zou zelfs zeggen dat de foto het gedeelte op 100% positieve manier overmeestert. Als de foto een miniatuur of een avatar was geweest, zou het effect niet eens bestaan. Als de foto een middelgroot vierkant (zeg minstens 300px bij 300px) was naast de kopie, zou het effect niet hetzelfde zijn. De keuze om zo'n groot beeld van Marks vriendelijke gezicht te gebruiken, was een goed gesprek; niet alleen biedt deze ontwerpbeslissing een menselijk en persoonlijk ontwerpelement, het is ook een creatief. Zonder deze foto zou er geen persoonlijk effect zijn op de gebruiker. Zonder deze specifieke lay-out zou deze sectie een heel ander emotioneel effect hebben.
6. UX Flow toont een kleine animatie kan een lange weg gaan
Dit volgende voorbeeld van een unieke lay-outoplossing heeft te maken met animatie. Als u een kijkje neemt op de startpagina van UX Flow en scroll een beetje naar beneden, misschien merk je dat een van de achtergronden van de sectie animeert. Het is echt niets bijzonders, maar het is uniek. Achtergronden verdwijnen niet naarmate u op een webpagina bladert. Als er iets is, hebben we de afgelopen jaren verschillende elementen uit een sectie gezien die tijdens het scrollen binnen- of buitenvliegen. Maar ik heb niet zoveel achtergrondanimaties naast parallax geleken. De reden dat dit belangrijk is, is dat een achtergrond een sectie definieert. En hoewel dit geen gekke animatie is, is het nog steeds indrukwekkend.
Niet alles hoeft stoutmoedig, hard en onaangenaam te zijn om indrukwekkend te zijn. Soms zijn de subtiele dingen zoals een kleine en snelle animatiegame voldoende om een unieke ervaring voor een gebruiker te creëren. Dit is absoluut een van die tijden. Wat ook belangrijk is om op te merken is dat de secties waartussen de animatie plaatsvindt geen unieke lay-outs hebben. Dat is goed; de overgang is merkbaar als je van de ene naar de andere sectie gaat, het maakt nog steeds deel uit van de lay-out, zelfs als het niet de eindlay-out is die door de animatie is gemaakt.
7. Ted Todd geïntegreerde kaart
Het visuele ontwerp en de algehele gebruikerservaring van Ted Todd De website is goed ontworpen. In het belang van dit artikel wil ik het hebben over de manier waarop Ted Todd de locatie en het kaartgedeelte op hun website gebruikt. Aan de onderkant van hun homepage is er een sectie die is aangewezen voor de verschillende kantoorlocaties die het bedrijf in heel Florida heeft. Er zijn meerdere redenen waarom deze sectie geweldig is. Ten eerste gebruikt de sectie de lay-out op een unieke manier om een stellaire ontwerpoplossing te bieden. Het meest opvallende aan dit gedeelte is de lichte vorm van Florida aan de rechterkant. Het beeld van Florida met zijn vele stippen is een fantastische manier om het bereik van het bedrijf te laten zien. Ze zeggen niet alleen dat ze in Florida zijn, het ontwerp laat je precies zien waar. Het is een eenvoudig te verteren visueel en het wordt ook op een fantastische manier uitgevoerd.
Het volgende belangrijke ding over deze sectie zijn de stippen. Ze zijn eigenlijk interactief. Als je erover zweeft, krijg je de naam van de stad waar het Ted Todd-verzekeringskantoor zich bevindt. Maar als je erop klikt, schuift het hele gedeelte naar links om ruimte te maken voor details over het specifieke kantoor. U krijgt het telefoonnummer, het adres en de openingstijden van het kantoor naast een lijst met werknemers. Ik hou van deze ontwerpoplossing omdat het een gebruiker toestaat om snel naar een locatie dichtbij hen te navigeren. Het is visueel veel interessanter en unieker dan wanneer de informatie op elkaar gestapeld was op een paginatitel "Our Florida Offices," vind je niet?
