Hoe een website te ontwerpen (met afbeeldingen)

ThisTeaches u hoe u een website ontwerpt die professioneel lijkt en goed uitvoert. Terwijl het bulk van het ontwerp van uw website uiteindelijk aan u is, zijn er enkele kritische dingen om te doen - en vermijden - bij het maken van een website.

Stappen

Deel 1 van 2:

Hoe u uw website ontwerpt

1. Bepaal of u een website-maker wilt gebruiken. Websites gemaakt van krassen vereisen een vrij gedetailleerd inzicht in HTML-codering, maar u kunt eenvoudig een website maken met behulp van een gratis hosting-service zoals Weebly, Wix, WordPress of Google Sites. Websites Makers zijn meestal veel gemakkelijker voor de eerste-time ontwerpers om te gebruiken dan HTML.

Als u besluit om uw eigen website te coderen, moet u beide leren Html en CSS codering.
Als u de tijd en energie investeert om uw website te maken, klinkt u niet aantrekkelijk, kunt u ook een websiteontwerper inhuren om uw site voor u te maken. Freelance-ontwerpers kunnen ergens tussen $ 30 per uur en ruim $ 100 per uur kosten.

Titel afbeelding Design a Website stap 2

2. Kaart uw site uit. Voordat u zelfs een website-maker opent, moet u ongeveer weten hoeveel pagina`s u wilt dat uw website heeft, wat de inhoud op elk van die pagina`s moet zijn, en de algemene lay-out van belangrijke pagina`s zoals de startpagina en de "Over" bladzijde.

De pagina`s van uw website zijn mogelijk gemakkelijker om te visualiseren als u ruwe foto`s van elk van hen tekent in plaats van alleen te bepalen welke inhoud zou moeten verschijnen.

Titel afbeelding Design a Website stap 3

3. Gebruik het intuïtieve ontwerp. Hoewel er iets is dat gezegd wordt voor verse ideeën, moet het basisontwerp van uw website gevestigde richtlijnen volgen, zoals het volgende:

Navigatie-opties (e.g., tabbladen voor verschillende pagina`s) moet bovenaan de pagina gaan.

Als u een menu-pictogram (☰) gebruikt, moet deze in de linkerbovenhoek van de pagina staan.

Als u een zoekbalk gebruikt, moet het nabij de rechterbovenkant van de pagina zijn.

Nuttige links (e.g., Links naar de "Over" pagina of de "Neem contact op" pagina) moet onderaan elke pagina gaan.

Titel afbeelding Design a Website stap 4

4. Wees consistent. WELKE TUST Lettertype, Kleurenpalet, Image Theme- en ontwerpopties die u kiest, zorg ervoor dat u hetzelfde besluit op uw website gebruikt. Het kan ongelooflijk schokkend zijn om één lettertype of kleurenschema te zien dat wordt gebruikt voor de "Over" pagina wanneer een geheel andere is gebruikt voor de startpagina.

Als u bijvoorbeeld uitsluitend koeltoonkleuren gebruikt voor de startpagina van uw site, implementeert u geen heldere, luide kleuren op de volgende pagina.

Houd er rekening mee dat het gebruik van luide of botsende kleuren, vooral wanneer de kleuren in een dynamiek worden weergegeven (E.g., Moving) Mode, kan epilepsie oproepen in een klein aantal webgebruikers. Als u besluit om dergelijke kleuren op uw site te gebruiken, moet u ervoor zorgen dat u een EPILEPSIE-waarschuwing toevoegt vóór relevante pagina`s.

Titel afbeelding Design a Website stap 5

5. Voeg navigatieopties toe. Directe koppelingen plaatsen op belangrijke pagina`s op uw website boven aan de startpagina, helpt u eerst de eerste bezoekers aan de inhoud die ertoe doet. De meeste site-makers toevoegen deze links standaard.

Het is belangrijk om ervoor te zorgen dat elke pagina op uw website toegankelijk is door op de opties op uw website te klikken in plaats van alleen te bereiken via het adres van de pagina.

Titel afbeelding Design a Website stap 6

6. Gebruik kleuren die elkaar aanvullen. Net als een ander soort ontwerp, vertrouwt Website Design op visueel aangename combinaties van kleur - vanwege dit, het plukken van thema-kleuren die samenkomen is cruciaal.

Zwart, wit en grijs is een goede combinatie als u niet weet waar u moet beginnen.

Titel afbeelding Design a Website stap 7

7. Overweeg het gebruik van een minimalistisch ontwerp. Minimalisme stimuleert koeltoonkleuren, eenvoudige grafische afbeeldingen, zwart-op-witte tekstpagina`s en zo min mogelijk verfraaiing. Omdat minimalisme weinig in de weg van fancy elementen vereist, is het een gemakkelijke manier om uw website er professioneel en aantrekkelijk uit te laten zien zonder veel werk te vereisen.

Veel websites makers hebben een "minimalistisch" Thema dat u kunt selecteren bij het instellen van uw website.

Een alternatief voor minimalisme is "brutalisme", die gebruik van hardere lijnen, heldere kleuren, gedurfde tekst en minimale beelden. Het brutalisme heeft minder van een volgende minimalisme, maar afhankelijk van de inhoud van uw website, kan het beter passen bij uw ontwerpbehoeften.

Titel afbeelding Design a Website stap 8

8. Maak unieke keuzes. Rechte lijnen en grid-vergrendelde webelementen zijn veilige weddenschappen, maar het maken van een paar unieke stilistische beslissingen zullen zowel persoonlijkheid aan uw site uitlenen en helpen uw site op te staan.

Wees niet bang voor Buck Trends door website-elementen asymmetrisch te plaatsen of het gebruik van overlappende elementen om een gelaagde uiterlijk te maken.

Terwijl elegante, scherpe hoeken en vierkante elementen (ook bekend als een "op de kaart gebaseerd" presentatie) zijn minder gunstig dan afgeronde, zachte elementen.

Deel 2 van 2:

Hoe de prestaties van de website maximaliseren

1. Profiteer van mobiele optimalisatie-opties. Mobiele browsersaccount voor meer webverkeer dan Do Desktop-browsers, wat betekent dat de hoeveelheid aandacht die u betaalt aan de mobiele versie van uw website ten minste de ontwikkeling van uw desktopwebsite moet gelijk zijn. De meeste Website Creator Services maken automatisch een mobiele versie van uw site, maar u wilt de volgende informatie in gedachten houden voor uw mobiele site:

Zorg ervoor dat knoppen (E.g., Site Links) zijn groot en eenvoudig te tikken.
Vermijd implementatiefuncties die niet op Mobile kunnen worden bekeken (E.g., Flash, Java, enz.).
Overweeg een mobiele app te hebben die voor uw website is gemaakt.

Titel afbeelding Design a Website stap 10

2. Vermijd het gebruik van te veel foto`s per pagina. Zowel desktop- als mobiele browsers kunnen worstelen om pagina`s te laden die een groot aantal foto`s of video`s weergeven. Terwijl afbeeldingen belangrijk zijn in het webdesign, kan het gebruik van meer dan een paar per pagina onnodig lange laadtijden veroorzaken, die voorkomen dat mensen van een bezoek brengen aan de betreffende pagina (s).

Over het algemeen wilt u de pagina`s van uw website binnen vier seconden laden.

Titel afbeelding Design a Website stap 11

3. Voeg een ... toe "Contact" bladzijde. Je zult merken dat vrijwel alle gevestigde websites een hebben "Neem contact op" Pagina met contactinformatie (E.g., Een telefoonnummer en een e-mailadres) - Sommige sites hebben zelfs een ingebouwd vraagformulier op deze pagina. Het toevoegen van een "De pagina `Pagina met Contact geeft Website-kijkers een directe communicatielijn aan u, waardoor een oplossing wordt toegevoegd aan potentiële frustraties.

Titel afbeelding Design a Website stap 12

4. Maak een aangepaste 404 pagina. Wanneer iemand een specifieke pagina op uw website bezoekt, die niet is ingesteld of niet bestaat, a "404 FOUT" Webpagina wordt weergegeven. De meeste browsers hebben een standaard 404-pagina, maar mogelijk kunt u de uwe aanpassen van de instellingen van uw website Creator-, indien dat het geval is, zorg dan dat u de volgende gegevens opneemt:

Een lichthartige foutmelding (e.g., "Gefeliciteerd - je hebt onze foutpagina gevonden!")

Een link terug naar de startpagina van de site

Een lijst met gewoon bekeken links

Een afbeelding of logo voor uw website

Titel afbeelding Design a Website stap 13

5. Gebruik indien mogelijk een zoekbalk. Als de methode van uw website-creatie ondersteunt het toevoegen van een zoekbalk aan uw website, wordt het sterk aanbevolen dat u dit doet. Dit zorgt ervoor dat gebruikers snel kunnen navigeren naar een specifieke pagina of item zonder te hoeven klikken via uw navigatieopties.

Zoekbalken zijn ook handig wanneer uw publiek naar een algemene termijn wil zoeken zonder proef-en-fout te gebruiken.

Titel afbeelding Design Een website Stap 14

6. Investeer de meeste tijd in uw startpagina. Wanneer iemand op de startpagina van uw website arriveert, moeten ze de thema van uw website onmiddellijk krijgen - daarnaast moeten alle elementen van de startpagina snel laden, inclusief navigatie-opties en alle afbeeldingen. Uw startpagina moet de volgende aspecten hebben:

Een oproep tot actie (e.g., een knop om te klikken of een formulier om in te vullen)

Een navigatiewerkbalk of menu

Een uitnodigende afbeelding (e.g., een solide foto, een video of een kleine groep foto`s met begeleidende tekst)

Trefwoorden Met betrekking tot de service, onderwerp of focus van uw website

Titel afbeelding Design a Website stap 15

7. Test uw website in meerdere browsers op meerdere platforms. Dit is ongelooflijk belangrijk, omdat verschillende browsers de aspecten van uw website anders kunnen afhandelen. Voordat u uw website begint te promoten, probeer dan uw website te bezoeken en te gebruiken in de volgende browsers op Windows, Mac, iPhone en Android-platforms:

Google Chrome

Firefox

Safari (alleen iPhone en Mac)

Microsoft Edge en Internet Explorer (alleen Windows)

De ingebouwde browser op verschillende Android-telefoons (E.g., Samsung Galaxy, Google Nexus, enz.)

Titel afbeelding Design a Website stap 16

8. Ga door met het bijwerken van uw website zoals het ouder wordt. Design Trends, Links, Foto`s, Concepten en trefwoorden Alle wijzigen naarmate de tijd verstrijkt, dus je moet doorgaan met het aanbrengen van wijzigingen in je website om up-to-date te blijven. Dit vereist u om de prestaties van uw website naast andere vergelijkbare websites te controleren ten minste één keer per drie maanden (bij voorkeur vaker).

Basic HTML-hulp

Voorbeeld webpagina met HTML

Ondersteuning wikihow en Ontgrendel alle monsters.

Html cheat vel

Ondersteuning wikihow en Ontgrendel alle monsters.

Voorbeeld eenvoudige webpagina

Ondersteuning wikihow en Ontgrendel alle monsters.

Tips

Toegankelijkheid van de website is een ander belangrijk aspect van de ontwikkeling van de website. Dit omvat dingen zoals bijschriften voor gehoorvaardige doelgroepen, audiobeschrijvingen voor blinde bezoekers en lichtgevallen waarschuwingen als uw website potentieel aanvulling-inducerende effecten gebruikt.

De meeste websites maken hebben een reeks sjablonen die u kunt gebruiken om de lay-out en het ontwerp van uw site te cementeren voordat u uw gewenste elementen toevoegt.

Waarschuwingen

De meeste makers van de site zijn echter gratis- als u uw eigen domein wilt gebruiken (E.g., "uw naam.com" in plaats van "uw naam.wordpress.com"), je moet een maandelijks of een jaarlijkse vergoeding betalen.

Vermijd plagiaat en observeer alle auteursrechtwetten: voeg geen willekeurige afbeeldingen toe van het web of zelfs structurele elementen, zonder toestemming.

Deel in het sociale netwerk: