Voorbeelden van site-ontwerp

Inhoudsopgave:

Voorbeelden van site-ontwerp
Voorbeelden van site-ontwerp
Anonim

Laten we niet ingaan op cijfers en berekeningen, aangezien het onmogelijk is om te bepalen hoeveel sites er al op internet bestaan. Elke dag falen duizenden, zo niet honderdduizenden sites en verschijnen er nieuwe voor in de plaats. Wat is de reden van de mislukkingen? Waarom gaan mensen naar de site en verlaten ze deze meteen? Het antwoord is eenvoudig en recht voor uw ogen - dit is het ontwerp van de site.

Attractie-effect

Mee eens, iedereen heeft een aantal bepaalde sites die dag na dag worden bezocht. Ik weet zeker dat de meeste van de bladwijzers favoriete sites zijn met films, boeken, nieuws, games, enz. Waarom, nadat we de ene site hebben gevonden, proberen we niet een andere soortgelijke te vinden, die misschien nog beter is? Het antwoord is simpel! De sites waarvan we een bladwijzer maken, zijn handig in gebruik - dergelijke sites hebben meestal een handige rangschikking van elementen, categorieën en een aangenaam ontwerp dat het oog niet irriteert. Dit is het "attractie-effect", één keer een goed ontworpen site bezoeken - deze verlatenniet langer willen.

Laten we eens kijken naar het voorbeeld van het handelsplatform twee sites:

Voorbeeldsites
Voorbeeldsites

Ongetwijfeld en onbetwistbaar wil site nummer 1 zo snel mogelijk worden gesloten, en site nummer 2 daarentegen wil blijven hangen. Waarom gebeurt dit? Op de eerste site is er naast een willekeurig gelokaliseerd product ook een kleuroververzadiging, wat van de tweede site niet gezegd kan worden. Er is zo'n prachtig spreekwoord: "Ze ontmoeten elkaar door hun kleren, maar ze zien ze af door hun geest", het is ook van toepassing op sites, alleen in plaats van kleding is er een ontwerp, en in plaats van een geest is er een navigatiestructuur. De bezoeker die de site is binnengekomen, ziet als eerste het kleurenschema en let dan pas op de interne navigatie en sitestructuur.

Kleurperceptie

De belangrijkste regel bij het kiezen van kleuren is om het niet te overdrijven. Soms zijn zelfs twee of drie correct geselecteerde kleuren meer dan genoeg, een levendig voorbeeld hiervan is de site fb.ru. Veel webdesigners gebruiken een tabel met "veilige" kleuren om hun html-site te ontwerpen.

Tabel met veilige kleuren
Tabel met veilige kleuren

Veilig wordt het genoemd omdat alle kleuren die hier worden weergegeven door absoluut alle gebruikers op dezelfde manier worden verzonden. Van deze kleuren kan worden gezegd dat ze de standaard zijn bij het maken van het ontwerp op de site.

Kleurcompatibiliteit

Elke kleur heeft zijn eigen "vriendelijke" kleur - dit is de kleur waar hij het beste bij past. Het wiel opnieuw uitvinden en experimenteren met selectie is niet nodig, alles is al lang uitgevonden en is in het publieke domein. Kleurenwielen worden gebruikt om kleuren te selecteren. Itten. De afbeelding hieronder toont een kleurenwiel voor het matchen van 2 bijpassende kleuren.

Complementaire kleurencombinatie
Complementaire kleurencombinatie

T. d.w.z. de tegenovergestelde kleur binnen de cirkel wordt als het meest compatibel beschouwd. Als u 3 overeenkomende kleuren moet selecteren, wordt ook het kleurenwiel gebruikt, alleen de kleurschikkingslijn is al gewijzigd.

Triad - een combinatie van 3 kleuren
Triad - een combinatie van 3 kleuren

En er zijn veel van dergelijke cirkels, je kunt meer bijpassende kleuren oppikken. Bijvoorbeeld vier.

Tetrad - een combinatie van vier kleuren
Tetrad - een combinatie van vier kleuren

Door op deze manier kleuren te selecteren door de cirkels van Itten, wordt de maximale combinatie van kleuren bereikt en wordt een visueel aantrekkelijk ontwerp van de site verkregen. Meer kleurcirkels zijn online te vinden. Laten we een beetje afwijken van het hoofdonderwerp, want ik wil je erop wijzen dat deze Itten-kleurenwielen zelfs door professionele ontwerpers uit de modewereld worden gebruikt, d.w.z. bij het maken van merkkleding wordt deze kleurafstemmingsmethode gebruikt.

Interne sitestructuur

Als min of meer alles duidelijk werd met kleurperceptie, dan blijft er nog een belangrijkere indicator over als de interne structuur van de site of met andere woorden: "bruikbaarheid". Het is niet genoeg om alleen de juiste kleuren op de site te kiezen, zoals de praktijk laat zien - met het prachtige ontwerp van de site kom je niet ver. De juiste structuur van de site is als het frame van een huis, als het niet correct is gepland, is het lastig om eromheen te navigeren.

Alle navigatie-elementen moeten van tevoren worden uitgedacht, en nog beter - opgeschreven. StructuurDe site moet in de eerste plaats begrijpelijk en gemakkelijk zijn voor bezoekers. Veel sites verliezen hun bezoekers alleen omdat deze laatste bij het betreden van de site niet begrijpen waar en wat zich bevindt. Het is niet nodig om te rommelen met een massa knoppen en een heleboel functionaliteit op te hangen. Je moet altijd door de ogen van de bezoeker kijken, als de gebruiker een bepaalde functie niet nodig heeft, is het beter om deze te verwijderen. Nogmaals, een helder en correct voorbeeld van website-ontwerp is de Fb.ru-website, waarop alle secties zich bevinden op een manier die begrijpelijk en handig is voor de bezoeker.

De grootste fout

Volgens de gemiddelde analyse gelooft een gebruiker die de benodigde sectie of informatie op de site niet binnen 15-30 seconden kan vinden dat deze sectie of informatie niet op de site staat en verlaat hij de bron. In de meeste gevallen voor altijd. Een goed voorbeeld van een site met vreselijke navigatie:

Slechte sitenavigatie
Slechte sitenavigatie

Denkt u dat het mogelijk is om de nodige informatie over een dergelijke bron te vinden door niet vanuit de zoekopdracht te gaan, maar gewoon naar de hoofdpagina? Ik denk het niet. Nogmaals, de kleurverzadiging en de overvloed aan onbegrijpelijke navigatie, die elke bezoeker in een verdoving en verbijstering zal brengen. Om dergelijke fouten te voorkomen, is het noodzakelijk om alle secties te groeperen en ze in een apart navigatiemenu te plaatsen, dat voor elke bezoeker begrijpelijk is.

Registratieformulier

Een andere belangrijke en angstaanjagende factor op de site is het registratieformulier. Sommigen proberen de gegevens van bijna betovergrootmoeders te verzamelen in het registratievenster.

Verkeerd inschrijfformulier
Verkeerd inschrijfformulier

Dergelijke registratieformulierenwaren eerder in de mode, toen internet pas in huizen begon te verschijnen. Tegenwoordig wil de internetgebruiker de informatie die hij nodig heeft zo snel mogelijk vinden, en lange registratieformulieren, ondanks het uitstekende ontwerp van de site, zullen 99% waarschijnlijk afstoten. Het ideale registratieformulier volgens de huidige normen wordt hieronder weergegeven.

Correct inschrijfformulier
Correct inschrijfformulier

Zelfs als deze informatie niet voldoende is, neemt niemand de moeite om deze later op te vragen bij de bezoeker, na het registratieproces. Deze aanpak wordt als loyaler en vriendelijker beschouwd dan het registratieformulier, dat meer op een sollicitatieformulier lijkt.

Websitesjablonen

Veel sites worden nu gemaakt op moderne CMS-systemen die gratis site-ontwerp bieden. Maar gratis ontwerp (sjablonen) heeft geen visueel ontwerp, dus als de site-eigenaar het op geen enkele manier probeert te veranderen, verdwijnt zo'n site in de zoekopdracht.

Het is ook de moeite waard om de hele internetportalen te noemen die aanbieden om uw eigen website op basis daarvan te implementeren. In dit geval zijn er zowel voor- als nadelen:

  • Het eerste en misschien wel het enige pluspunt is eenvoud. Het siteframe is in de regel al gemodelleerd naar dergelijke bronnen door ervaren ontwerpers, het ontwerp van de site wordt onder bepaalde vereisten en regels gebracht. Het blijft alleen om het te vullen met thematisch materiaal en te wachten op de eerste bezoekers. Daarom trekt de eenvoud en het gemak van dergelijke diensten beginners aan. Maar als de site is opgezet voor serieuze ontwikkeling en concurrentie voortop-1 in zoekmachines, dan is het beter om zo'n dienst te weigeren.
  • Van de minnen - de meegeleverde sjablonen kunnen in de meeste gevallen niet worden bewerkt of gewijzigd, je zult altijd de meegeleverde sjablonen moeten gebruiken. Monotonie is het grootste nadeel, waar we het in het begin over hadden, omdat elke site individueel moet zijn en qua uiterlijk van andere moet verschillen. Veel beperkingen die onmogelijk te beschrijven zijn, aangezien elke dergelijke service zijn eigen heeft.

Laatste deel

Alles wat in dit materiaal wordt beschreven, pretendeert niet een "hoofdinstructie" te zijn, je kunt en moet alles altijd op je eigen manier doen - dit is slechts een verzameling van de meest voorkomende regels en fouten. Maar de belangrijkste punten, hier beschreven in de vorm van kleurperceptie en de interne structuur van de site, zijn de standaard voor het ontwerpen van de site. Verkeerd gekozen kleuren schrikken elke bezoeker af die net de site is binnengekomen, en een analfabeet ontwerp van categorieën en site-elementen zal hem niet in staat stellen te navigeren en de nodige informatie te vinden. Deze punten moeten maximale aandacht krijgen en, zoals hierboven vermeld, je moet altijd naar een site kijken door de ogen van een bezoeker, en niet door de ogen van een ontwikkelaar.

Aanbevolen: