Ontwerp 'n webwerf: 9 stappe (met prente)

Inhoud

Trappe
- Metode 1 van 2: Die 3 basiese reëls
- Metode 2 van 2: Riglyne
Wenke
Waarskuwings

Om `n wonderlike webwerf te ontwerp kan na `n uitdagende taak lyk, maar solank jy die basiese beginsels in gedagte hou, sal jy die proses interessant en pret vind. Dit gaan oor meer as net mooi voorkoms! Ons sal jou die basiese beginsels wys, en `n paar algemene riglyne om jou te help om webwerwe te ontwerp wat mense weer en weer sal besoek.

Trappe

Metode 1 van 2: Die 3 basiese reëls

1. Reël 1:Luister na jou kliënt. dalk ontwerp jy "die wêreld se beste webwerf ooit in die geskiedenis van die heelal en verder," met ryk swartes, gesofistikeerde lettertipes en helder, artistieke kleure vir `n werf wat skree "verken my nou!" Ongelukkig wou jou kliënt `n oranje spyskaartbalk met helderpienk en oranje letters hê. Jy is afgedank, en jou beste webwerf ooit - wat die kliënt besit - is iewers op hul rugsteunskyf, en niemand sal dit ooit weer sien nie.

Bestudeer jou kliënt se korporatiewe identiteit. Laat die kliënt vir jou `n paar webwerwe wys waarvan hulle hou. Dit sal jou nie net `n idee gee van waarvan hulle hou nie, dit sal jou ook `n paar ontwerpidees gee waaraan jy dalk nie gedink het nie.
As jy gedink het ons maak `n grap oor die oranje en pienk webwerf, oorweeg hierdie koel, gesofistikeerde webwerf:

Prent getiteld Webwerf—dunkin donuts.jpg

2. Reël #2:Ken jou gehoor en waarna hulle soek, en pas jou ontwerp daarvolgens aan. Die rede waarom mense webwerwe het, is omdat hulle wil hê dat ander mense dit moet sien. Dit kan inligting, of kommersieel wees, of om `n spesifieke gehoor te vermaak. Jou werk as ontwerper is om te weet vir wie jy ontwerp, en om hulle op die bladsy te hou wanneer hulle daar aankom.

Jy mag dalk dink: "As dit goed lyk sal hulle bly." Maar dit hoef nie noodwendig die geval te wees nie. Neem byvoorbeeld vaste eiendom. Hier is `n webwerf met `n helder, prettige ontwerp. Dit het baie wit spasie wat `n oop voorkoms gee, helder kleure en `n moderne wyeskermformaat met skakels op `n prominente plek:

Beeld getiteld Santa monica Real Estate 1.jpg

Kyk nou na hierdie benadering tot die verkoop van vaste eiendom in dieselfde area: morsig en baie besig, dowwe kleure en bedek met advertensies.

Raai watter een werk beter vir mense wat `n huis soek? Reg, die een waar huise wat regop staan! Wanneer mense soek na "huise te koop in Santa Monica," hulle gee nie om hoe `n webwerf lyk nie. Hulle wil nie van die makelaar lees, of mooi foto`s van die stad sien nie. Hulle wil huise sien.

3. Reël #3:luister na jouself. Jy verstaan wat die kliënt wil hê, en jy weet waarna jou mark soek. Nou is dit uiteindelik tyd om aandag te gee aan jou, die ontwerper!

Bou `n sjabloon in die grafiese sagteware van jou keuse. Maak die elemente van jou bladsy op verskillende lae (sodat jy dinge later kan aanpas sonder om die hele sjabloon te vernietig). Hierdie elemente kan wees:

kop. Dit is `n element wat dieselfde is op elke bladsy van jou werf. Die opskrif bestaan uit die titel en logo van die webwerf, sowel as skakels na die ander dele van die webwerf (bv. Oor, Kontak, ens.). Visueel en prakties sal dit alles saambind. Dit is goeie praktyk om die eerste knoppie op `n menubalk terug na die tuisblad te koppel.

Kom ons kyk byvoorbeeld na Apple:

Prent getiteld Apple Home Landing Page.jpg

Soos met die meeste Apple dinge, het hul tuisblad `n baie skoon, ongekompliseerde ontwerp. Let op die kieslysbalk aan die bokant, met logiese onderwerpe vir elke knoppie, plus `n soekveld - altyd `n goeie idee as jou werf dit ondersteun. Kom ons kyk nou na `n bestemmingsbladsy vir een van die knoppies, die iPad, om `n paar elemente te sien:

Die menubalk verander slegs deur die iPad-knoppie te verduister.

Landing page onderwerp word in groot swart letters vertoon.

`n Nuwe subkieslys sal verskyn sodat jy meer oor die produk kan leer. As jy op een van hierdie knoppies klik, sal jy sien dat elke bladsy nuwe inhoud bied, afhangende van die onderwerp, maar identies sal wees in uitleg en ontwerp.

Dikwels sal elke hoofonderwerp in jou kieslysbalk verskeie subopskrifte hê wat jy moet invul. In plaas daarvan om `n tweede kieslysbalk te skep, kan jy opspringkieslyste soos hierdie voorbeeld van Musician`s Friend gebruik:

sybalk. Dit sal op baie bladsye van jou werf verskyn, maar nie noodwendig alles nie - konteks bepaal. Dit is egter `n baie belangrike element, en moet sorgvuldig ontwerp word om intuïtief te wees en nie te deurmekaar nie. Anders as die menubalk, kan die inhoud van `n sybalk baie dinamies wees. Kyk na hierdie twee sidebars van die eiendomsbemarker Trulia. Die eerste een is vir kopers:

En die tweede is vir huurders. Let op die heeltemal verskillende fokus vir baie soortgelyke inligting, en dit word op presies dieselfde plek op die sybalk vertoon:

liggaam. Dit is waar dit alles gebeur, en dit is die mees veranderlike deel van jou ontwerp. Byvoorbeeld, as jy `n e-handelswerf ontwerp, kan een bladsy `n produkresensie in die liggaam hê, terwyl die volgende 20 items te koop kan hê. Jou taak is om die twee saam te bind sodat hulle nie visueel onsamehangend is nie. Gebruik dieselfde kleure, lettertipes en koppelvlakelemente om dit alles bymekaar te bring.

voetskrif. Dit is iets wat nie elke webwerf (behoeftes) het nie. Dit word dikwels gebruik vir dinge wat `n andersins slanke koppelvlak kan deurmekaar maak, of om toegang te bied tot minder belangrike areas van die webwerf. Hier is `n voorbeeld van Groupon:

Metode 2 van 2: Riglyne

1. Ontwerp `n goeie gebruikerskoppelvlak. Plaas die verskillende elemente van die webwerf, soos die titel, sybalke, logo`s, beelde en teks op elke bladsy op dieselfde plek om jou webwerf navigeerbaar en intuïtief te maak.

Hou dieselfde kopskrif bo-aan elke bladsy. Of jou werf se inhoud vir baie herhalende elemente voorsiening maak of nie, maak ten minste seker dat die bokant van elke bladsy dieselfde is.

Gebruik logika in jou ontwerp. Die elemente op `n enkele bladsy moet logies georganiseer word volgens belangrikheid of onderwerp; die verskillende bladsye op die webwerf moet ook wees.

2. Skep `n konsekwente styl. Waar die uitleg jou werf strukturele konsekwentheid moet gee, moet die styl hierdie tematiese harmonie gee.

Hou by twee of drie hoofkleure en maak seker dat hulle goed pas.

Vermy die gebruik van te veel fontstyle of -groottes; as jy `n paar wil afwissel, gebruik hulle op dieselfde manier op elke bladsy.

Gebruik Cascading Style Sheets (CSS) om `n verenigde styl te handhaaf, en maak dit makliker om elemente oor `n hele webwerf te verander sonder om na elke bladsy afsonderlik te gaan.

3. Maksimeer leesbaarheid. Om jou teks makliker leesbaar te maak, kan jy dit in kleiner dele opdeel.

Gebruik onderskrifte en toepaslike spasiëring om elk van die dele te skei.

Gebruik vet letters of verskillende groottes om die hiërargie en belangrikheid van die onderwerpe te wys.

Gee aandag aan hoe jy teks hanteer. Moenie die lettertipe te klein maak nie, en vergroot die lynspasiëring om groot stukkies teks makliker te maak om te lees. Groot stukke teks is moeiliker om te lees; verdeel dit in kleiner paragrawe.

4. Maak jou webwerf universeel leesbaar. Gebruik standaard HTML en vermy merkers, kenmerke en plugins wat slegs vir een handelsmerk of weergawe van `n blaaier beskikbaar is.

Terwyl die meeste moderne blaaiers en rekenaars komplekse beelde kan hanteer, sal die grootte en optimalisering van jou beelde vir die web alles gladder laat lyk. Weeg die belangrikheid van kwaliteit teen die belangrikheid van spoed.

5. Toets jou webwerf. Maak seker dat elke skakel werk soos jy sou verwag, en dat beelde korrek verskyn.

Miskien wil u `n paar gebruikerstoetse organiseer deur lede van u teikengehoor die duidelikheid en bruikbaarheid van u ontwerp te laat toets en terugvoer oor u webwerf te gee.

6. Publiseer jou webwerf. Koop `n domeinnaam as jy dit nog nie het nie. Kyk gereeld of skakels nog werk en luister na voorstelle wat besoekers aan jou e-pos.

Wenke

Alhoewel jy vry is om die uitleg te ontwerp op grond van jou eie persoonlike visie of dinge wat jy op ander webwerwe gesien het, kan dit makliker wees om `n klaargemaakte ontwerp te koop.

Moenie die besoeker bombardeer met oulike, spesiale prente nie. Flitsanimasie, helder kleure, patroonagtergronde en musiek wat outomaties speel wanneer bladsy gelaai word, was prettige eksperimente in die 90`s, maar nou gaan dit gebruikers afskrik. Hou by eenvoudige agtergronde wat kontrasteer met die tekskleur vir maksimum leesbaarheid.

Jy kan altyd CSS gebruik om paragraafspasiëring te optimaliseer.

Vir besoekers met gehoor- of gesiggestremdheid, kan jy video`s onderskrif, oudio transkribeer en `n toeganklikheidsboodskap byvoeg. Terwyl tabelle `n doeltreffende manier kan wees om inligting te organiseer, sal siggestremde besoekers wat skermleesprogrammatuur gebruik dalk nie die materiaal in die regte volgorde hoor nie.

Laat jou besoekers ink spaar: gebruik `n aparte stylblad vir gedrukte bladsye.

Deaktiveer agtergrondprente wanneer u drukparameters instel.
Gebruik swart teks op `n wit agtergrond.
Verwyder die menubalk en onnodige beelde.

Waarskuwings

Vermy plagiaat en gehoorsaam alle kopieregwette. Moenie arbitrêre beelde wat jy aanlyn vind, of selfs strukturele elemente sonder goedkeuring byvoeg nie. Alles wat u op u webwerf gebruik, moet wettig sowel as eties wees.