Een website voor een nieuw product maken (en hoe we dit deden)

Start hier als u nog geen creatieve opdracht hebt. Een creatief kort schetst precies hoe u van plan bent om over uw product of bedrijf te praten. Het bepaalt de tone of voice van je merk, je kleurenpalet, je waardeverklaring en nog veel meer. Uw creatieve opdracht definieert hoe uw website met klanten zal communiceren.

Mogelijk hebt u al een creatieve opdracht opgesteld als u het proces voor het ontwikkelen van het logo hebt doorlopen. Als dat zo is, kunt u dat voor uw website gewoon opnieuw gebruiken. Als je nog geen creatieve opdracht hebt ontwikkeld, is dit het moment om er een te bouwen.

Gelukkig heb ik al een gedetailleerd artikel geschreven waarin je wordt uitgelegd hoe het moet, inclusief voorbeelden uit de creatieve brief van Outpost, dus je kunt zien hoe we de onze hebben gebouwd. Dus, als u aan uw creatieve opdracht moet werken, bekijk dan mijn artikel over hoe we ons logo en de bijbehorende creatieve opdracht hebben ontwikkeld en kom hier dan terug wanneer u klaar bent.

Een sitemap maken

Met uw creatieve opdracht in met de hand, begin je aan je sitemap te werken. Een sitemap is gewoon een overzicht van alle pagina's (inclusief hun doelen en doel) die u van plan bent op uw site op te nemen.

Dit is de sitemap die we hebben ontwikkeld voor Outpost:

1. 1. Home : Productoverzicht en een "oproep tot actie" om u aan te melden voor een gratis proefversie. Secundaire links naar andere pagina's waarin functies worden beschreven.
   2. Functies Overzicht : een overzicht van alle functies met koppelingen naar gedetailleerde functiepagina's.
      1. Feature-details voor Feature A: Details van Feature A.
      2. Feature-detail voor Feature B: Details van Feature B.
      3. Herhaal dit voor alle functies.

• Prijzen: details over tariefplannen en links om u aan te melden voor een gratis proefperiode.
• Klanten: Profielen van succesvolle klanten.
• Over ons: Overzicht van wie we zijn, onze missie en onze geschiedenis.
• Contact: Contactgegevens, uren, locatie.
• Werk: Een lijst van onze huidige vacatures.
• Privacyverklaring: Het privacybeleid van Outpost.
• Blog: Homepage voor de blog met recente blogberichten.
• Blogpost: Er zullen meerdere blogposts zijn. Deze pagina zal de sjabloon voor hen zijn.
• Helpcentrum: Ons helpcentrum wordt mogelijk gemaakt door Zendesk.

Natuurlijk zal uw site waarschijnlijk heel anders zijn dan de sitemap van Outpost. Als u een restaurant bent, heeft u waarschijnlijk een pagina of twee voor menu's en een pagina voor reserveringen. Als u een online winkel bouwt, heeft u waarschijnlijk veel verschillende productpagina's.

Uw sitemapdocumenten, zo goed als u kunt, wat u denkt dat uw site zal bevatten. Deze kleine planning maakt de planning en ontwikkeling van de rest van de site een stuk eenvoudiger, dus het is de investering in dit vroege stadium waard.

Schrijf je exemplaar eerst vóór ontwerp

Je gaat denken dat ik dat niet heb gedaan krijg de bestelling hier niet. Moet je je website niet ontwerpen voordat je bedenkt welke woorden je op de pagina wilt zetten?

Uw exemplaar eerst schrijven helpt u en potentiële ontwerpers ook te begrijpen wat elke pagina probeert te communiceren. Dit resulteert in een beter ontwerpontwerp dat uw berichtensysteem versterkt. Zelfs als je zelf je site gaat bouwen met een tool als Squarespace, weet je wat elke pagina moet zeggen voordat je een ontwerp kiest.

Wanneer het tijd is voor je ontwerp, kun je je moet je kopie verfijnen om er zeker van te zijn dat alles goed past, maar dat zal makkelijker zijn dan proberen om een ​​kopie te schrijven voor een ontwerp dat niet is ontworpen voor je berichten.

Voor je startpagina wil je waarschijnlijk een kop die beschrijft precies wat u doet - uw belangrijkste waardepropositie voor uw klanten. Dit wordt gevolgd door een korte, uitgebreide beschrijving van wat uw bedrijf doet.

Dit is de kop en uitgebreide beschrijving voor Outpost, het product dat we aan het bouwen zijn:

Stroomlijn uw gedeelde e-mail

Volg eenvoudig, werk samen, en reageren op berichten die naar generieke e-mailadressen zijn verzonden, zoals support @ of info @.

Van daaruit wordt de kopie die u op uw startpagina zult opnemen, echt bepaald door het type bedrijf dat u bent, wie uw klanten zijn zijn, en wat u nodig hebt om te communiceren.

Maar dit is misschien niet de juiste instelling voor uw startpagina. Als u een restaurant bent, wilt u wellicht links naar uw menu's of informatie over het krijgen van een reservering. Elk bedrijf is anders, dus bedenk wat je moet zeggen en schrijf het op.

Maak je echter geen zorgen over het starten met een lege pagina. Maak in plaats daarvan een lijst met uw favoriete websites in uw branche en bedenk wat u leuk en niet leuk vindt aan elke site. Welke soort navigatie gebruiken ze? Welke pagina's bevatten ze? Welke afbeeldingen gebruiken ze? U hoeft het wiel niet opnieuw uit te vinden en het gebruik van een favoriete site als startpunt is een goede manier om te beginnen.

Een laatste tip:

Minder is meestal meer. Laat je niet verleiden om eindeloze alinea's van de kopie voor je website te schrijven (tenzij dat is wat je klanten verwachten!). Als je aandacht besteedt aan hoe je websites gebruikt, zul je merken dat je vaak door de tekst bladert en niet elk woord leest. Want dat is hoe de meeste mensen online lezen - skimmen in plaats van elk woord lezen - houd uw exemplaar kort en to the point.

Een draadmodel ontwikkelen Een draadframe is een ruwe lay-out van uw website. Het is niet echt een ontwerp, precies. Het is een document dat grofweg laat zien waar dingen op de pagina terechtkomen, zonder rekening te houden met kleuren of andere afbeeldingen.

Als u samen met een ontwerper werkt aan het bouwen van uw website, produceren zij een draadframe voor u als onderdeel van de ontwerpproces. Als u uw website alleen aan het bouwen bent, kunt u met een service zoals Squarespace of Shopify eenvoudig zelf een draadframe bouwen.

Laat u niet intimideren door deze stap. U hebt geen speciaal gereedschap nodig om een ​​draadframe te maken. Een notitieblok en een pen volstaan ​​om elke pagina van uw site te schetsen. Vergeet niet dat u niet "ontwerpt" en dat een draadframe niet mooi hoeft te zijn. Het hoeft alleen maar te communiceren wat daar waar op een pagina staat.

Als je inspiratie nodig hebt, bekijk dan andere sites die je leuk vindt en bekijk hoe ze de informatie op elke pagina structureren. Het is prima om lay-outs van andere sites te lenen en inspiratie op te doen voor je eigen site.

Als pen en papier niet jouw ding zijn, kun je PowerPoint of Keynote gebruiken om wireframes te maken. Er zijn ook speciale wireframing-tools zoals Balsamiq die het proces gemakkelijk maken.

Ik heb Outpost's homepage wireframe hieronder opgenomen, zodat je een idee krijgt van hoe een wireframe eruit ziet. U kunt ook de kopie bekijken die we in de vorige stap hebben gemaakt en een schets van een idee voor een grafisch element dat we door een ontwerper willen laten maken.

Ons draadmodel voor buitenpost.

Ontwerp en bouw