Hoe om `n webblad te ontwerp

Die ontwerp van `n uitstekende webwerf kan lyk soos `n groot uitdaging, maar solank jy die basiese beginsels in gedagte het, sal jy dit `n interessante en genotvolle proses vind. Daar is veel meer as voorkoms! Ons sal jou die basiese beginsels en algemene reëls wys om jou te help om webwerwe te ontwerp waarop mense wil terugkeer.

conținut

Stappe
Metode 1die 3 basiese reëls
Metode 2reëls
Wenke
Waarskuwings

stappe

Metode 1
Die 3 basiese reëls

Reël No 1: Luister na jou kliënt. Jy kan ontwerp "die beste webwerf in die geskiedenis van die heelal en meer ", met `n ryk ontwerp, gesofistikeerde lettertipes en vet en artistieke kleure op `n webwerf wat" explórame ya! "skreeu. Maar ongelukkig wou jou kliënt `n oranje spyskaart hê met lirieke dik in pienk en oranje. Jy word ontslaan, en die beste werf in die geskiedenis - waaroor jou kliënt eienaarskap besit - lê iewers op die hardeskyf, sodat geen sterflike dit kan sien nie.

Bestudeer u kliënt se korporatiewe identiteit. Vra jou kliënt om jou webwerwe te wys wat jy regtig wil. Dit sal jou nie net `n idee gee van wat jou verbeelding laat vaar nie, maar dit sal jou ontwerp idees gee wat jy nie oorweeg het nie.
As jy gedink het ons was grappies oor die webwerf in pienk en oranje, dink net dat die beste en mees gesofistikeerde werf in die geskiedenis hierdie produk moet bevorder:

Webwerf% E2% 80% 94dunkin-donuts.jpg" klas ="beeld ligkas">

Prent getiteld Website-dunkin donuts.jpg

Reël No 2: Ontmoet die gehoor en wat hulle soek, en maak `n gepaste ontwerp. Die rede waarom mense webwerwe het, is omdat hulle wil hê dat ander hulle moet sien. Dit kan insiggewend of kommersieel wees, of vir vermaaklikheidsdoeleindes gefokus op `n spesifieke demografiese groep. Jou werk, as ontwerper, is om te weet vir wie jy ontwerp, en hou hulle op die bladsy sodra hulle daar kom.

Jy mag dalk dink, "As dit goed lyk, sal hulle bly." Maar dit is nie noodwendig die geval nie. Byvoorbeeld, dink aan Real Estate. Daar is `n webwerf wat `n skoon en vermaaklike ontwerp bied. Dit het `n baie leë spasie wat dinge oopmaak, sterk kleure en `n baie moderne horisontale skermformaat, met die skakels uitgelig:

Santa-Monica-real-boedel-1.jpg" klas ="beeld ligkas">

Prent getiteld Santa Monica Real Estate 1.jpg

Dink nou aan hierdie metode van eiendomsverkope in dieselfde streek: dit is rommelig en het baie dinge, gekleurde kleure en vol advertensies.

Santa-Monica-trulia.jpg" klas ="beeld ligkas">

Raai watter van die twee plekke die beste is vir diegene wat huise soek. Reg, die een wat werklik "huise wys"! Wanneer mense soek vir "huise te koop in Santa Monica," is hulle nie geïnteresseerd in die estetika van die werf nie. Hulle wil nie weet van die makelaar, of sien mooi foto`s van die stad nie. Hulle wil die huise sien.

Reël No. 3: Luister na jouself. Jy verstaan wat die kliënt wil hê, en jy weet wat die mark soek. Ten slotte was dit tyd om aandag te gee aan jou, die ontwerper!

Stel `n sjabloon op in die grafiese ontwerpprogram van u keuse. In verskillende lae (om dinge later te kan verander, sonder om die hele sjabloon te vernietig) maak die elemente wat op die bladsy gaan. Hulle kan wees:

kop. Die koptekst (koptekst, in Engels) sal `n algemeen element wees vir alle bladsye van die werf. Die kop het die titel en logo van die werf, en skakels na die ander onderafdelings van die werf (soos oor, kontak, ens.). Visueel en prakties, dit is wat alles verenig. `N Goeie oefening is om die eerste knoppie van `n spyskaart te maak, `n skakel na die tuisblad.

Kom ons kyk Apple, byvoorbeeld:

Apple-huis-landing-page.jpg" klas ="beeld ligkas">

Prent getiteld Apple home landing page.jpg

Soos byna alles oor Apple, het sy tuisblad `n baie skoon en gestreepte ontwerp. Kyk na die menubalk bo-aan, met logiese temas op elke knoppie, plus `n soektogveld - dit is altyd `n goeie aanraking as jou webwerf dit ondersteun. Kom ons soek nou `n aankomsblad vir een van die knoppies, die iPad, en kyk na sommige van sy elemente:

IPad-landing-page.jpg" klas ="beeld ligkas">

Die navigasiebalk verander net die iPad-knoppie.

Die tema van die aankomsbladsy is in swart en groot letters links bo.

`N Submenu blyk meer te weet oor die produk. As u op die submenu titels klik, sal u sien dat elke bladsy nuwe inhoud relevant vir die onderwerp bied, maar met presies dieselfde ontwerp.

Baie keer sal elke hooftitel van die menubalk verskeie onderskrifte bevat waarvoor jy moet reageer. In plaas daarvan om `n sekondêre balk te skep, kan jy pop-up spyskaarte gebruik soos hierdie voorbeeld van Musicus se vriend:

MF-spyskaart-menu.jpg" klas ="beeld ligkas">

sidebar. Dit sal ook `n algemene element wees in baie bladsye van jou webwerf, maar nie noodwendig in almal nie: die koning is die inhoud. Maar dit is `n baie belangrike element, en jy moet dit noukeurig ontwerp sodat dit intuïtief is en geen onnodige elemente het wat dit belemmer nie. In teenstelling met die menubalk, kan die inhoud van die sidebar baie dinamies wees. Kyk na hierdie twee sidebars van `n eiendomsbedryf: Trulia Die eerste is vir diegene wat wil koop:

Trulia-buy.jpg" klas ="beeld ligkas"> Prent getiteld Trulia buy.jpg

En die tweede een is vir diegene wat wil huur. Let op die heeltemal ander benadering wat vir baie soortgelyke inligting gemaak word - en dit verskyn op presies dieselfde plek in die sidebar:

Trulia-rent.jpg" klas ="beeld ligkas"> Prent getiteld Trulia rent.jpg

liggaam. Dit is waar alles gebeur, en dit is die mees veranderlike deel van die ontwerp. As jy byvoorbeeld `n e-handelswerf doen, kan een bladsy `n beskrywing van die produk in die liggaam hê, en die volgende het 20 items te koop. Jou werk is om die twee te verenig sodat hulle nie visueel ongelyk lyk nie. Gebruik soortgelyke kleure, letters en koppelvlak-elemente sodat alles kohesie het.

voet. Voet is iets wat nie alle webwerwe het of nodig het nie. Dit word gewoonlik gebruik vir dinge wat `n ontwerp kan belemmer, of om toegang te gee tot dele van die werf wat nie die hoof fokus van aandag is nie. Hier is `n voorbeeld van Groupon:

Groupon-footer.jpg" klas ="beeld ligkas">

Metode 2
reëls

Oefen die koppelvlakontwerp vir goeie gebruik. Deur die verskillende elemente van die webwerf te vind, soos titel, sidebars, logo`s, grafika en teks op dieselfde plekke op elke bladsy, sal jou webwerf opgevolg en intuïtief wees.

Hou die kop aan die bokant van al die bladsye. Dit maak nie saak of die inhoud van jou webwerf leen om baie elemente te herhaal nie - om seker te maak dat die bokant van elke bladsy identies is, is noodsaaklik.
Gebruik logika in jou ontwerp. Die elemente van `n enkele bladsy moet op `n logiese manier bestel word, van belang of onderwerp - al die bladsye van die werf moet dieselfde doen.

Skep `n konsekwente styl Alhoewel die ligging van die elemente strukturele konsekwentheid aan die werf moet gee, moet die styl dit tematiese harmonie gee.

Bly met twee of drie hoofkleure en maak seker dat hulle goed harmoniseer.

Vermy die gebruik van te veel style of groottes van lettertipes. As u van plan is om tussen `n paar te wissel, moet u dit op dieselfde manier op alle bladsye gebruik.

Gebruik CSS (Cascading Style Sheet) om die eenvormigheid van die styl te bestuur en dit makliker te maak om die elemente regdeur die hele webwerf te verander sonder om afsonderlik na elke bladsy te gaan.

Maksimum leesbaarheid Om die teks makliker te lees, ontbind dit in kleiner afdelings.

Gebruik ondertitels en voldoende spasiëring om elke afdeling te skei.

Gebruik vetletters of verskillende groottes om die hiërargie en belangrikheid van die temas te wys.

Gee aandag aan die hantering van die teks. Moenie die lettertipe te klein maak nie, of die paragrawe te wyd, dus is dit makliker om te lees. Groot teks paragrawe sal moeiliker wees om te lees - breek dit in klein paragrawe.

Maak seker dat u webwerf universeel gelees kan word. Gebruik standaard HTML en vermy tags, funksies en invoegtoepassings wat slegs in een handelsmerk of een blaaier weergawe beskikbaar is.

Alhoewel blaaiers en die nuutste rekenaars komplekse beelde kan hanteer, sal alles `n bietjie makliker wees as jy klein beelde wat vir die web geoptimaliseer is, behou. Maak `n balans tussen die begeerte vir kwaliteit en die behoefte aan spoed.

Toets jou webwerf Maak seker dat alle skakels werk soos u wil, en dat die beelde korrek lyk.

Dit sal gerieflik wees om sommige bruikbaarheidstoetse te doen en die lede van die teikengehoor te vra om die duidelike en gemaklike gebruik van u ontwerp te evalueer en u mening oor die webwerf te gee.

Publiseer jou webwerf As jy dit nog nie gedoen het nie, koop `n domein. Gaan die skakels gereeld na om seker te maak hulle bestaan nog steeds en luister na die voorstelle wat besoekers aan jou maak.

wenke

Alhoewel jy vry is om te ontwerp op grond van jou persoonlike visie of die dinge wat jy bewonder van ander webwerwe, sal dit makliker wees om `n gereedgemaakte sjabloon te koop.
Om te verhoed dat besoekers se ink mors, gebruik `n aparte CSS om die webwerf te druk vir druk.

Skakel die agtergrond beelde uit wanneer u die drukparameters stel.
Gebruik swart teks op `n wit agtergrond.
Verwyder die menubalk en onnodige beelde.

Moenie besoekers bombardeer of gimnasiumgrafieke bombardeer nie. Flash-animasies, helder kleure, patrone agtergronde en musiek gespeel outomaties elke keer as `n bladsy laai was iets snaaks in die 90s, maar vandag vervreem gebruikers. Bly met eenvoudige agtergronde wat kontrasteer met die kleur van die teks, vir maksimum leesbaarheid.

Om visueel of versteurde besoekers aan te pas, kan jy die video onderskryf, die klank afskryf en `n aantekening oor toeganklikheid insluit. Alhoewel tafels `n doeltreffende manier is om inligting te organiseer, kan besoekers met visuele probleme wat `n skermlesingsprogram gebruik, nie die materiaal wat deur kolomme bestel word, hoor nie.

Jy kan altyd CSS gebruik om voldoende afstande tussen paragrawe te vestig.

waarskuwings

Vermy plagiaat en voldoen aan alle kopieregwette. Moenie ewekansige beelde van die internet byvoeg nie, of gebruik struktuurelemente sonder toestemming. Wat jy ook al op die webwerf plaas, moet dit reg en eties wees.

Deel op sosiale netwerke:

Verwante