Als u webpagina's wilt ontwerpen en maken, zal dit proces veel eenvoudiger zijn als u vooruit plant. In de planfase kunnen ontwerper en opdrachtgever samen zoeken naar een formaat en indeling die bij hun wensen passen. Het planningsproces is van invloed op de stijl of stijl van de site, je zou kunnen zeggen dat dit het belangrijkste aspect is bij webdesign, vooral als het voor zakelijke doeleinden is.
Stap
Deel 1 van 4: De basisstructuur maken
Stap 1. Bepaal de functie van de website
Als u een persoonlijke site maakt, weet u waarschijnlijk het antwoord al. Als u echter een site maakt voor een andere organisatie, bedrijf of persoon, moet u weten wat ze willen en wat de functionaliteit van de site is. Alles wat u hier opgeeft, wordt van kracht wanneer de webpagina is voltooid.
- Vereist de website Storefront? Moeten er opmerkingen van gebruikers worden gemaakt? Moet de gebruiker later een account aanmaken? Is het artikel op de website gericht? Of beeldgericht? Al deze en andere vragen helpen je bij het ontwerpen en inrichten van de site.
- Dit planningsproces kan in een tekening worden getekend, vooral als het voor een groot bedrijf is en er veel mensen bij het maken van dit project betrokken zijn.
Stap 2. Maak een sitemapdiagram (sitemap)
Een sitemapdiagram is vergelijkbaar met een stroomdiagram en laat zien hoe gebruikers van de ene pagina naar de andere gaan. U hebt in dit stadium geen webpagina nodig, alleen een algemene stroom van concepten. U kunt een computerprogramma gebruiken om diagrammen te maken of uw eigen diagrammen op papier te schetsen. Gebruik dit diagram om de concepten van hiërarchische rangschikking en webpagina-connectiviteit te demonstreren.
Stap 3. Probeer de kaartontwerpmethode
Een populaire methode voor groepswebontwikkeling is om een aantal kaarten te gebruiken om de verwachtingen van iedereen te achterhalen. Neem een aantal notitiekaarten en noteer op elk afzonderlijk de basisinhoud van een webpagina. Schik deze kaarten samen met je team om het beste concept te vinden. Deze methode is geschikt om te gebruiken wanneer u met anderen samenwerkt aan het maken van webpagina's.
Stap 4. Gebruik papier en een prikbord, of een whiteboard
Dit is een originele planningsmethode met een klein budget, je kunt snel inhoud verwijderen of verschuiven en de stroom wijzigen. Teken je webdesign op papier en verbind de papiertjes met draad, of teken lijnen op het bord. Deze methode is zeer geschikt om te gebruiken in brainstormsessies.
Stap 5. Maak een contentinventaris aan
In feite is het meestal geschikter om te gebruiken bij het opnieuw ontwerpen van websites dan bij nieuwe webontwerpen. Voeg elk voltooid stuk inhoud of webpagina in een spreadsheet in. Noteer het doel van elk stukje inhoud of elke pagina en gebruik deze lijst om te bepalen wat u moet verwijderen en wat u moet bewaren. U kunt de structuur van het web vereenvoudigen en het herontwerpproces later vereenvoudigen.
Deel 2 van 4: Een basis HTML-overzicht maken
Stap 1. Maak een wireframe om de hiërarchie van de webpagina vast te stellen
De basis HTML-sjabloon is de blauwdruk van de site die u gaat bouwen, waarbij alleen de meest elementaire tags en voorbeeldinhoud (blokken/sjablonen) worden gebruikt. Dit framework geeft antwoord op de vraag: "Wat is er zichtbaar op internet en waar?" Opmaak en opmaak zijn niet vereist bij het maken van dit overzicht.
- U kunt de structuur en het stroomschema van de inhoud zien met een basisoverzicht voordat u een stijlinstelling kiest.
- Basis HTML-sjablonen zijn niet statisch zoals PDF's of afbeeldingen, u kunt snel door voorbeeldinhoud vegen om nieuwe structuren te creëren.
- Het basisframework is interactief, wat zowel webontwikkelaars als klanten ten goede komt. Aangezien dit basisframework is geschreven met eenvoudige HTML-code, kunt u er nog steeds doorheen navigeren en weten hoe het wisselen van webpagina's werkt. Dit kan niet met PDF.
Stap 2. Probeer de Gray Box-methode
Blokkeer of markeer uw webpagina-inhoud in Gray Box, de belangrijkste inhoud staat bovenaan. Sorteer de inhoud in één kolom. Als de pagina bijvoorbeeld 'Over het bedrijf' is, staat gedetailleerde informatie over het bedrijf bovenaan, gevolgd door een lijst met medewerkers, dan contactgegevens, enz.
Dit is exclusief kop- en voetteksten. Gray Box is een visuele weergave van de inhoud die op internet zal verschijnen
Stap 3. Probeer een eenvoudig programma voor het maken van schetsen
Er zijn verschillende programma's die u kunt gebruiken bij het maken van een basiswebframework. De hoeveelheid webprogrammeercode (taal) die je moet beheersen is voor elk programma verschillend. Enkele van de programma's die behoorlijk populair zijn, zijn:
- Patroon Lab. Deze site is gewijd aan "atoomontwerp", elke inhoud wordt beschouwd als een "molecuul" dat een grotere webpagina vormt.
- Jump-diagrammen. Deze webpagina biedt webgebaseerde plannings- en framingdiensten. Deze sites zijn betaald en vereisen een abonnement, maar u kunt snel webframeworks bouwen zonder veel webprogrammeercode te hoeven beheersen.
- Draadloos. Wirefy is een andere site die "atomair ontwerp" biedt. Webontwikkelaars kunnen de tool gratis krijgen.
Stap 4. Gebruik eenvoudige HTML-opmaak
Een goede basissjabloon kan gemakkelijk worden geconverteerd naar de originele site. Denk niet te veel na over webstyling tijdens het maken van deze sjabloon. Gebruik opmaak die gemakkelijk kan worden begrepen en gewijzigd.
Een eenvoudig basiskader is veel beter. Het doel van het maken van een opmaak is om een structuur te bouwen. Het uiterlijk kan later worden aangepast met CSS en geavanceerde opmaak
Stap 5. Maak een basisoverzicht voor elke webpagina
U kunt in de verleiding komen om elke webpagina gelijk te stellen aan één basisoverzicht. In feite zal dit uw site alleen maar saai en saai maken. Maak voor elke pagina een ander overzicht, je zult begrijpen dat elke pagina zijn eigen ontwerp nodig heeft.
Deel 3 van 4: Inhoud creëren
Stap 1. Bereid de inhoud voor voordat u een webpagina maakt
U zult het veel gemakkelijker vinden om een voorbeeld van uw webweergave te bekijken als u al daadwerkelijke inhoud heeft in plaats van voorbeelden of tijdelijke aanduidingen te gebruiken. U hoeft niet te veel inhoud te hebben, maar uw mockup ziet er veel beter uit als u een kopie van de originele afbeelding gebruikt.
U hoeft niet al het artikelmateriaal te hebben, maar het moet in ieder geval een echte kop hebben
Stap 2. Onthoud dat geweldige inhoud niet alleen uit tekst bestaat
Het internet is veel complexer dan een simpele webpagina met tekst. Je hebt een verscheidenheid aan verschillende inhoud nodig om een geweldige website te maken die bezoekers trekt en uitnodigt. Bijvoorbeeld:
- Afbeelding.
- Stem.
- Videos.
- Webtransmissie of webstream (Twitter)
- Facebook-integratie
- RSS
- Webfeed
Stap 3. Vraag een professionele fotograaf om hulp
Als u foto's op uw site wilt opnemen, zal de eerste indruk die u van uw website krijgt veel beter zijn als deze is gevuld met professionele fotografie. Eén goede foto is meer waard dan twintig foto's van lage kwaliteit.
Zoek een pas afgestudeerde fotograaf als een goedkopere oplossing dan een professionele fotograaf die al heel lang in het vak zit
Stap 4. Schrijf kwaliteitsartikelen
De geschreven inhoud op de webpagina bepaalt de hoeveelheid webverkeer. Hoewel u zich tijdens dit ontwerpproces niet al te veel zorgen hoeft te maken over het maken van inhoud, kan het geen kwaad om erover na te denken, omdat u ook regelmatig inhoud nodig heeft als uw site eenmaal in de lucht is.
Naast artikelinhoud is er geschreven materiaal dat u ook nodig heeft bij het samenstellen van een webpagina. Bijvoorbeeld contactgegevens, bedrijfsnaam of iets anders dat meerdere keren op de site zal worden gebruikt
Deel 4 van 4: Concepten omzetten in websites
Stap 1. Regel de basiselementen
Deze rangschikking van elementen is van toepassing op elke pagina op uw site, zoals kopteksten, voetnoten en navigatiemenu's. Stel het in een heel eenvoudige stijl in, zodat u kunt controleren hoe alle pagina's eruitzien. Dit is vooral handig naarmate u verder komt in het weblay-outproces.
Maak je niet al te veel zorgen over details, probeer een voorbeeld te bekijken (preview) hoe de kop eruitziet
Stap 2. Maak een eenvoudige lay-out
Begin met het verschuiven van de klokpositie van de basisoverzichtskolom naar de werkelijke locatie op de pagina. U wilt bijvoorbeeld het voorbeeldnavigatiemenu naar de linkerkant van de pagina verplaatsen en de lijst met koppen naar rechts.
Blijf experimenteren met weblay-outs voor meerdere pagina's voordat u doorgaat naar de volgende stap. Laat anderen ernaar kijken om te zien of de lay-out die je maakt leeft
Stap 3. Maak een mockup
Gebruik een programma zoals Photoshop om mockups of voorbeeldpagina's van uw website te maken. Gebruik de lay-out die je hebt samengesteld als richtlijn. U kunt sneller mockups maken en de gewenste resultaten krijgen met een beeldverwerkingsprogramma. De resultaten van deze afbeeldingen kunnen later worden gebruikt als referentie bij het schrijven van webprogrammeercode.
Zet de daadwerkelijke inhoud in de mockup om het er goed uit te laten zien
Stap 4. Vervang het voorbeeldconcept door de originele inhoud
Voeg inhoud en elementen toe aan webpagina's. Maak je geen zorgen over de instellingen voor webstijlen, maar stapel alles op de juiste locatie. Dit zal u helpen bij het beoordelen van de wijzigingen in de webstijl die u later aanbrengt.
Stap 5. Maak een webstijlgids
Het is erg belangrijk om een mix van stijlen te behouden, vooral voor grote sites. Als de site bedoeld is voor zakelijke doeleinden en al een eigen merk of stijl heeft, moet dit worden geïntegreerd in het ontwerp van de site. Dingen om te overwegen bij het maken van een webpagina-stijlgids:
- Navigatie
- Hoofdnoot:
- Paragraaf
- cursief karakter
- Vet karakter
- Links (actief, inactief, hover)
- Afbeeldingsgebruik
- Icoon
- Knop
- lijst
Stap 6. Pas de webstijl toe
Zodra u de juiste stijl en het juiste ontwerp hebt gevonden, implementeert u deze. CSS is een van de gemakkelijkste manieren om stijlen op een webpagina of op de hele site te implementeren. Raadpleeg de volgende instructies om de details van het gebruik van CSS beter te begrijpen.
