Hoe een webpagina ontwerpen

Het ontwerpen van een uitstekende website kan een geweldige uitdaging lijken, maar zolang je de basis in gedachten hebt, zul je het een interessant en plezierig proces vinden. Er is veel meer dan uiterlijk! We zullen je de basisprincipes en enkele algemene regels laten zien waarmee je websites kunt ontwerpen waarnaar mensen willen terugkeren.

Inhoud

Stappen

Methode 1de 3 basisregels
Methode 2reglement

Tips
Waarschuwingen

stappen

Methode 1
De 3 basisregels

Regel nummer 1: Luister naar je klant. Je kunt ontwerpen "de beste website in de geschiedenis van het universum en nog veel meer ", met een rijk ontwerp, geavanceerde lettertypen en opvallende en artistieke kleuren op een website die" explórame ya! "schreeuwt. Maar helaas wilde je klant een oranje menu met songteksten dik in roze en oranje. Je wordt ontslagen en de beste site in de geschiedenis - waarover je klant eigendomsrechten bezit - ligt ergens op de harde schijf, zodat geen sterveling het kan zien.

Bestudeer de huisstijl van uw klant. Vraag je klant om je sites te laten zien die je echt leuk vindt. Dit geeft je niet alleen een idee van wat je verbeeldingskracht ontketent, maar het geeft je ook een aantal ontwerpideeën die je misschien niet hebt overwogen.
Als je dacht dat we een grapje maakten over de website in roze en oranje, stel je dan voor dat de beste en meest gesofisticeerde site in de geschiedenis dit product moet promoten:

Website% E2% 80% 94dunkin-donuts.jpg" class ="afbeelding lightbox">

Titel afbeelding Website-dunkin donuts.jpg

Regel nr. 2: Maak kennis met het publiek en wat ze zoeken en maak een passend ontwerp. De reden waarom mensen websites hebben, is omdat ze willen dat anderen ze zien. Het kan informatief of commercieel zijn, of voor amusementsdoeleinden gericht op een bepaalde demografische groep. Jouw taak, als ontwerper, is om te weten voor wie je ontwerpt en houd ze op de pagina zodra ze daar zijn.

Je denkt misschien: "Als het er goed uitziet, blijven ze." Maar dit is niet noodzakelijk het geval. Denk bijvoorbeeld aan onroerend goed. Er is een site met een schoon en onderhoudend ontwerp. Het heeft veel lege ruimte die dingen opent, sterke kleuren en een zeer modern horizontaal schermformaat, met de links gemarkeerd:

Santa-monica-real-estate-1.jpg" class ="afbeelding lightbox">

Titel afbeelding Santa monica real estate 1.jpg

Denk nu eens na over deze methode van verkoop van onroerend goed in dezelfde regio: het is rommelig en heeft veel dingen, opzichtige kleuren en zit vol met advertenties.

Santa-monica-trulia.jpg" class ="afbeelding lightbox">

Titel afbeelding Santa monica trulia.jpg

Raad eens welke van de twee sites het beste is voor mensen op zoek naar huizen. Goed, degene die echt "huizen toont"! Wanneer mensen zoeken naar `huizen te koop in Santa Monica`, zijn ze niet geïnteresseerd in de esthetiek van de site. Ze willen niets weten van de makelaar in onroerend goed, of leuke foto`s van de stad zien. Ze willen de huizen zien.

Regel nr. 3: Luister naar jezelf. U begrijpt wat de klant wil en u weet waar de markt naar op zoek is. Eindelijk was het tijd om aandacht te schenken aan jou, de ontwerper!

Maak een sjabloon in het grafische ontwerpprogramma van uw keuze. In verschillende lagen (om dingen later te kunnen wijzigen zonder de hele sjabloon te hoeven vernietigen) maakt u de elementen die op de pagina gaan. Ze kunnen zijn:

hoofd. De koptekst (kop, in het Engels) zal een gemeenschappelijk element zijn voor alle pagina`s van de site. De header heeft de titel en het logo van de site en links naar de andere subsecties van de site (zoals Over, Contact, etc.). Visueel en praktisch, het verenigt alle dingen. Een goede gewoonte is om de eerste knop van een menu een link naar de startpagina te laten maken.

Laten we kijken appel, bijvoorbeeld:

Apple-home-landing-page.jpg" class ="afbeelding lightbox">

Titel afbeelding Apple home landing page.jpg

Zoals bijna alles over Apple, heeft de startpagina een zeer schoon en uitgekleed ontwerp. Kijk naar de menubalk bovenaan, met logische thema`s op elke knop, plus een zoekveld - het is altijd een goed idee als uw site dit ondersteunt. Laten we nu eens kijken naar een aankomstpagina voor een van de knoppen, de iPad, en naar een aantal elementen kijken:

Ipad-landing-page.jpg" class ="afbeelding lightbox">

De navigatiebalk verandert alleen de knop van de iPad verduisterend.

Het thema van de aankomstpagina staat in de linkerbovenhoek in zwarte en grote letters.

Een submenu lijkt meer te weten over het product. Als u op die submenutitels klikt, ziet u dat elke pagina nieuwe inhoud biedt die relevant is voor het onderwerp, maar met exact hetzelfde ontwerp.

Vaak heeft elke hoofdtitel van de menubalk meerdere ondertitels waarvoor u moet reageren. In plaats van een secundaire balk te maken, kunt u pop-upmenu`s gebruiken zoals dit voorbeeld van Muzikant vriend:

Mf-menu-menu.jpg" class ="afbeelding lightbox">

zijbalk. Het zal ook een veel voorkomend element zijn op veel pagina`s van uw website, maar niet noodzakelijk in alle: de koning is de inhoud. Maar het is een heel belangrijk element en je moet het zorgvuldig ontwerpen, zodat het intuïtief is en geen onnodige elementen bevat die het belemmeren. In tegenstelling tot de menubalk kan de inhoud van de zijbalk erg dynamisch zijn. Kijk naar deze twee zijbalken van een vastgoedhandelaar: Trulia De eerste is voor degenen die willen kopen:

Trulia-buy.jpg" class ="afbeelding lightbox"> Titel afbeelding Trulia buy.jpg

En de tweede is voor degenen die willen huren. Let op de totaal verschillende benadering die is gemaakt voor zeer vergelijkbare informatie - en deze verschijnt op exact dezelfde plaats in de zijbalk:

Trulia-rent.jpg" class ="afbeelding lightbox"> Titel afbeelding Trulia rent.jpg

lichaam. Dit is waar alles gebeurt, en het is het meest variabele deel van het ontwerp. Als u bijvoorbeeld een e-commercesite gebruikt, kan één pagina een beschrijving van het product in de body hebben en de volgende pagina 20 items te koop hebben. Jouw taak is om de twee te verenigen zodat ze er niet visueel ongelijk uitzien. Gebruik vergelijkbare kleuren, letters en interface-elementen, zodat alles samenhang heeft.

voet. Voet is iets dat niet alle sites hebben of nodig hebben. Het wordt meestal gebruikt voor dingen die een ontwerp kunnen hinderen of om toegang te geven tot delen van de site die niet het belangrijkste aandachtspunt zijn. Hier is een voorbeeld van Groupon:

Groupon-footer.jpg" class ="afbeelding lightbox">

Methode 2
reglement

Oefen het interface-ontwerp voor goed gebruik. Door de verschillende elementen van de website, zoals titel, zijbalken, logo`s, afbeeldingen en tekst op dezelfde plaatsen op elke pagina te lokaliseren, wordt uw site navigeerbaar en intuïtief.

Houd de koptekst boven aan alle pagina`s. Het maakt niet uit of de inhoud van uw site geschikt is om veel elementen te herhalen - ervoor zorgen dat de bovenkant van elke pagina identiek is, is essentieel.
Gebruik logica in uw ontwerp. De elementen van een enkele pagina moeten op een logische manier worden gerangschikt, op belangrijkheid of onderwerp - alle pagina`s van de site moeten hetzelfde doen.

Creëer een consistente stijl Hoewel de locatie van de elementen structurele consistentie moet geven aan de site, moet de stijl het een thematische harmonie geven.

Blijf bij twee of drie hoofdkleuren en zorg dat ze goed harmoniëren.

Vermijd het gebruik van te veel lettertypen of -groottes - als u van plan bent om af te wisselen tussen een paar, zorg er dan voor dat u ze op alle pagina`s op dezelfde manier gebruikt.

Gebruik CSS (Cascading Style Sheet) om de uniformiteit van de stijl te beheren en het gemakkelijker te maken om de elementen op de hele site te wijzigen zonder elke pagina afzonderlijk te hoeven openen.

Maximaliseer de leesbaarheid Om de tekst leesbaarder te maken, ontbindt u deze in kleinere secties.

Gebruik ondertitels en voldoende afstand om elke sectie van elkaar te scheiden.

Gebruik vetgedrukte lettertypen of verschillende formaten om de hiërarchie en het belang van de thema`s te tonen.

Besteed aandacht aan de omgang met de tekst. Maak het lettertype niet te klein of de alinea`s te breed, zodat ze gemakkelijker te lezen zijn. Grote alinea`s in de tekst zijn moeilijker te lezen - verbreek ze in kleine alinea`s.

Zorg ervoor dat uw website universeel kan worden gelezen. Gebruik standaard-HTML en vermijd tags, functies en plug-ins die alleen beschikbaar zijn in één merk of één browserversie.

Hoewel browsers en de meeste moderne computers complexe afbeeldingen aankunnen, zal alles een beetje gemakkelijker zijn als je afbeeldingen van kleine omvang hebt die zijn geoptimaliseerd voor internet. Maak een balans tussen het verlangen naar kwaliteit en de behoefte aan snelheid.

Test uw site Zorg ervoor dat alle koppelingen werken zoals je wilt, en dat de afbeeldingen er goed uitzien.

Het zou handig zijn om een aantal bruikbaarheidstests uit te voeren, om leden van de doelgroep te vragen om de duidelijkheid en het gebruiksgemak van uw ontwerp te evalueren en om u hun mening te geven over de website.

Publiceer uw website Als u dit nog niet hebt gedaan, koopt u een domein. Controleer de links regelmatig om er zeker van te zijn dat ze nog steeds bestaan en luister naar de suggesties die bezoekers aan u doen.

tips

Hoewel u vrij bent om te ontwerpen op basis van uw persoonlijke visie of de dingen die u bewondert van andere sites, is het gemakkelijker om een kant-en-klaar sjabloon te kopen.
Gebruik een afzonderlijke CSS om de site op te maken voor afdrukken om te voorkomen dat de inkt van bezoekers wordt verspild.

Schakelt de achtergrondafbeeldingen uit wanneer u de afdrukparameters instelt.
Gebruik zwarte tekst op een witte achtergrond.
Verwijder de menubalk en onnodige afbeeldingen.

Bestorm bezoekers niet met vluchtige of gimmickachtige afbeeldingen. De animaties in flash, de felle kleuren, de achtergronden met prints en de muziek die automatisch wordt afgespeeld telkens als een pagina wordt geladen, waren iets leuks in de jaren 90, maar tegenwoordig houden ze de gebruikers weg. Blijf bij eenvoudige achtergronden die contrasteren met de kleur van de tekst, voor maximale leesbaarheid.

Om visueel of auditief gehandicapte bezoekers aan te passen, kunt u de video ondertitelen, de audio transcriberen en een notitie over toegankelijkheid toevoegen. Hoewel tabellen een efficiënte manier zijn om informatie te organiseren, horen bezoekers met visuele problemen die een schermleesprogramma gebruiken, het materiaal niet gesorteerd op kolommen.

U kunt CSS altijd gebruiken om voldoende afstanden tussen alinea`s te bepalen.

waarschuwingen

Vermijd plagiaat en voldoe aan alle auteursrechtwetten. Voeg geen willekeurige afbeeldingen toe vanaf internet of gebruik geen structurele elementen zonder toestemming. Wat u ook op de site plaatst, het moet zowel legaal als ethisch zijn.

Delen op sociale netwerken:

Verwant