'Siin on hullud, valed, mässulised, segaduste tekitajad, ümmargused pulkad ruudukujulistes aukudes ... need, kes näevad asju teisiti - nad ei armasta reegleid ... Võite neid tsiteerida, nendega mitte nõustuda, ülistada või halastada neid, kuid ainus asi, mida te ei saa teha, on neid ignoreerida, sest need muudavad asju ... ” - Apple'i oma Erinevalt mõtlema kampaania, Steve Jobs, 1997.

Enamasti loovad disainerid veebisaitide kujundamise käigus endiselt traditsiooniliste kujundustööriistade abil staatilisi ekraani makette. Aga mõned disainerid teevad hiiglasliku hüppe ja lähevad neist mööda, lähevad otse kodeerimiseks, kujunduste loomine ja kohandamine brauseris ning nende kujunduste testimine nagu need inimestele reaalajas ilmuksid. Kas need on hullud, sobimatud, mässajad?

Tavaliselt hõlmab traditsiooniline veebisaidi arendusprotsess paljusid etappe, sealhulgas planeerimine, sisustrateegia, kujundamine, traadiga raamimine, prototüüpimine, testimine, arendamine, avaldamine ja nii edasi. Kuid kas projekteerimisetapis võiks olla veel üks viis pikslitega täiuslike tundlike saidikujunduste tootmiseks ja disainivahenditest üldse mööda hiilimiseks?

milles on Linux kirjutatud

Aasta tõusuga reageeriv disain ja kasutatavate seadmete mitmekesisus (mobiiltelefonid, tahvelarvutid, sülearvutid, lauaarvutid, kellad), on palju raskem kõike järjepidevalt hoida - ja kui arvestada rohkem liikuvate osadega, muutub lähenemisviis veebisaitide ja liideste kujundamisel.

Ehkki disaineril pole vaja saada asjatundlikuks kodeerijaks, on üks lahendus disaineritel hakata töötama otse veebisaiti juhtiva koodiga. Disainerid, kes oskavad koodi välja käia Veidi HTML-i ja CSS-i kasutades on iga meeskond suur vara ja neil on üldiselt tohutu eelis.

Miks? Reageeriva veebisaidi kujundamise projekti kaasamisel kogu selle keerukusega disainerid tavaliselt pole aega luua ühe komponendi (näiteks päise või jalus) staatilist kujundust 10 erineva eraldusvõime ja vaateava vahel. Isegi kui disainitakse ainult kõige populaarsematele seadmetele, peavad nad siiski arvestama 4–5 erineva kuvasuhte, ekraani tiheduse ja mõõtmetega ekraaniga. Pole pehmelt öeldes väike ülesanne.

Esmalt pliiatsi ja paberiga veebisaidi kujundamise väljakutsete lahendamine

Uurime teistsugust veebisaidi kujundamise lähenemist ja planeerimisprotsessi.

Esimene etapp algab kliendi küsimustikuga, kus uuritakse projekti üldisi eesmärke ettevõtte vaatenurgast, sihtrühma, konversioonistrateegiaid, erinevaid tulemuslikkuse ootused , ja nii edasi. Seda tehakse enne tegeliku projekteerimisetapi käivitamist, et paremini mõista kliendi vajadusi ja kogu projekti ning et olla tõhusam.

Järgmine samm on kirjutada projekti ülevaade, et kinnitada, et lühikokkuvõte mõisteti. Sellest on abi nišis projektide kallal töötamisel, kus teil ei pruugi olla palju kogemusi ega asjatundlikkust. Nimetage seda funktsionaalseks spetsifikatsiooniks - kuid vähem tehniliseks.

See aitab määratleda terminoloogiaid, märksõnu ja protsesse. Sõltuvalt projekti keerukusest on mõistlik teha mitu stsenaariumi ja kasutajavoogu - tavaliselt on-line-voog, saidil otsimine ja navigeerimine või e-poe saitide lisamine ostukorvi ja kassasse voog.

Traadiraamid ja prototüübid

Prototüüpide loomine on veebisaidi kujundamise järgmine etapp. Kiire ehitamine traadiraamid hea algus on rääkida lehe paigutusest, funktsionaalsustest ja sellest, kuidas saidi lehed erinevates seadmetes välja näevad. Kümnete erinevate mallide ja komponentidega traadiraamide ehitamine ei võta palju aega. Nendest saab luua lihtsa veebisaidi prototüübi ja sõltuvalt projekti keerukusest meeldivad ka prototüüpimise tööriistad Visioon , Adobe XD , Balsamiq , Moqups või Axure saab kasutada.

Meeleolulauad ja liidese inventuur

Järgmine samm on a meeleolulaud : kogu asjadest, mis disainerile, kliendile ja teistele sidusrühmadele muudel veebisaitidel meeldida võivad - paigutused, välimus, värvid või fondid, ikoonid, pildid ja nii edasi. See aitab määratleda saidi üldist ilmet. Kui kliendil on brändimisstiili juhend, tuleks seda kaaluda ja lisada uude saidikujundusse.

Kui erinevad esemed - traadiraamid, prototüübid, maketid, meeleolulauad jne - on heaks kiidetud, on mõistlik teha liidese inventuur .

Liidese inventuur on teie liidese moodustavate bitide ja osade terviklik kogumik.

Brad Frost

Kui teete tundlikku veebidisaini nullist, siis kirjutage üles kõik komponendid ja elemendid, millest projekt ehitatakse. Korrastamata loend sobib suurepäraselt ja on kindlasti parem kui mitte midagi. Näiteks tabelid, nupud, pildid, tüpograafia, kandjad, vormid, navigeerimine, komponendid jne.

mis tüüpi llc ma olen

Kujundamine brauseris

„Brauseris kujundamine” on termin, mis sai populaarseks koos reageeriva veebidisaini kasvuga. Disainiprogrammides veedetud tundide minimeerimiseks Visand , disainereid kutsuti üles viima disainifaas brauserisse ja kasutama CSS-i paigutuse ja kujunduse jaoks. See veebisaidi kujundamise lähenemine osutub tõhusamaks, kuna see lõikab palju samme.

Keskendudes HTML-i maketile ja katsetades CSS-iga 'brauserisiseseid' disainiideid, saab tavaliselt säästa teiste kujundustööriistade, näiteks Sketch lehtede staatiliste makettide loomisele kuluvat aega. See on hea idee disainerid hea koodiredaktori kätte saamiseks ja hea brauseri värskendamismeetodi väljatöötamiseks, et nad saaksid muudatusi reaalajas näha. Ülev tekst ja Codekit näiteks on suurepärane kombinatsioon.

HTML ja CSS , struktureeritud sellisena, nagu nad on, sunnib teid mustrite peale mõtlema ja vaos hoidma. HTML-komponentide loomisel, mida saab hõlpsalt kopeerida, paljundada ja dünaamiliste andmetega täita, säilitades samas struktuuri, on lihtsam mõelda modulaarsusele. Kui soovite luua konkreetse modifikatsiooni, peate selle elemendi selgesõnaliselt sihtima või lisama teise CSS-klassi.

Pealkirjade stiilimisel on need kogu saidil järjepidevad, välja arvatud juhul, kui need on alistatud. Sama kehtib ka teiste elementide kohta. Seda tüüpi mõtlemine sunnib teid standardiseerima, ühised elemendid kokku rühmitama, võimalikult stiilis elemente uuesti kasutama ja mis kõige tähtsam, hoidma kõike modulaarsena.

mis on nagu korporatsioon OÜ

Ühe CSS-deklaratsiooniga saate muuta nuppude polsterdusi sihtmärkide paremaks puudutamiseks ja testida otse a-ga mobiiltelefon , tablett ja töölauale. Photoshopis või Sketchis pole seda lihtne teha, kuna muud elemendid pole paigutusest üksteisest teadlikud ja peate objektid ümber korraldama iga kord, kui midagi muudate.

Kas soovite proovida mõnda muud päise värvilahendust? Vaid mõne CSS-koodi reaga töötades on muudatused kõigis HTML-mallides nähtavad koheselt, kõigis seadmetes ja ekraanidel. Sellist paindlikkust ei saa lihtsalt jäljendada, kui teil on 20 staatilist maketti. Tõepoolest, taaskasutatavate komponentide jaoks võiksite Sketchis või Adobe XD-s kasutada sümboleid, kuid need pole nii mitmekülgsed kui CSS.

Selles etapis tuleb teha mitu tehnilist otsust. Küsimused, millele tuleb vastata, on:

• Kas kasutate a CSS-i eeltöötleja ? (soovitatav)
• Mis tüüpi reageeriv ruudustik kas te kasutate paigutust?
• Kas fonte, mida soovite kasutada, saab osta? Kas kliendil on esmaklassiliste veebifondide eelarve või pöördute tagasi olemasolevate kasutamisele tasuta veebifondid ?
• Kas kasutate mitmevärvilisi või ühevärvilisi ikoone? Kas suurus varieerub kogu saidil? Kas toetute järgnevalt kohandatud joonistatud ikoonidele või juba olemasolevale ikoonipaketile? Milliseid suurusi teie ikoonid peavad mahutama?

Fondide ja tundliku veebidisaini häda

Tundliku veebidisaini projekti jaoks fondide valimine võib olla keeruline. Võimalusi on palju ja sama palju lõkse. Kuna kujundust kasutatakse brauseris, on see parim koht nende proovimiseks. Fontide loetavus võib varieeruda suuruse, kaalu, värvide ja renderduse järgi, nii et proovides fonte otse brauseris, disainerid saab veenduda, et asjad näevad õiged välja ja soovitud ootused on täidetud.

Fondide valimiseks ja testimiseks ning kirjatüüpide kombinatsioonide proovimiseks on palju veebitööriistu. Peal Typetester ja Typecast mitmesuguseid teenuseid ja valukodasid leidvaid fonte saab leida ja testida. Töötades kindla fondi tellimisteenusega nagu Lämmastik või Fonts.com saavad disainerid genereerida fonte ja testida oma lehemalle otse. Uute fontidega paketi Typekit genereerimine on lihtne ja kiire ning näete hõlpsalt, kuidas konkreetsed fondid mõjutavad veebilehtede toimivust.

Ikoonid, mis sobivad brändi stiiliga

Kui joonistamine on kohandatud ikoonid , tuleb määratleda suurus, ruudustik ja stiil. Töötamine aastal Illustraator , iga tahvel esindaks näiteks ühte ikooni. Ikoone saab Illustratorist hõlpsasti eksportida SVG või PNG kujul, mida saab hiljem muuta ikoonifondiks selliste teenuste abil Icomoon . Soovitatav on kasutada vektorikooni (SVG), kuna vektorid on eraldusvõimest sõltumatud, seega pole muret selle pärast, kuidas neid kõrglahutusega (võrkkesta) ekraanidel kuvada.

Stiilijuhend ja CSS veebisaidi kujundamise protsessi kontrolli all hoidmiseks

Isegi kui kavandame brauseris, võime kümnete mallide ja komponentide abil kaotada jälje sellest, kus ja kuidas midagi kasutatakse. See on hea mõte ehitada stiilijuht kõikidest komponentidest kui keskhoidlast. Sellest stiilijuhendist koostatakse konkreetsed lehemallid, ühendades kasutajaliidese komponendid ja elemendid veebilehtedeks.

Kasutajaliidese komponentideks võivad olla sellised asjad nagu paginatsioon, tooteloend, pildigalerii, modaalsed aknad, vormielemendid jne. Neid saab kasutada mallide ehitusplokkidena. Kõike ühes kohas hoidmine on tõesti mugav, kui on aeg testida konkreetse kasutajaliidese komponendi loomist.

mis on portjee viie jõu mudeli taga olev rusikareegel?

CSS-i puhul on parim tava komponentide stiilide eraldamine eraldi failideks. Näiteks on lehekülgede kujundus kujunduses _pagination.scss, vormielemendid _form.scss -s ja kõik need failid lisatakse ühte SCSS-faili koos teiste failidega (muutujad, mixin jne).

Kuigi style.scss võib koosneda kümnetest „väikestest failidest”, kui sama projektiga tegeleb mitu inimest, on muudatuste jälgimine lihtsam (olgu siis allikakontrolli kasutamine või mitte), kui kõik on jagatud väiksemateks tükkideks. Pärast veebisaidi kujundamise projekti tootmist on oluline jätkata stiilijuhendi säilitamist, kuna meeskond peab jälgima kõiki saidi komponente.

Stiililehtede kasutamine - modulaarne CSS

Arenduse seisukohalt on moodul CSS-i kirjutamiseks palju lähenemisviise. Kõige tuntumad on SMACSS (CSS-i skaleeritav ja modulaarne arhitektuur), HEA (Plokk, element, teisendaja) ja OOCSS (Objektorienteeritud CSS). Õppida on parajalt palju, isegi kui jõuate lõpuks omaenda lähenemisviisini. Siinkohal peaks teil olema kena kasutajaliidese komponentide ja veebilehtede kogu, mis võimaldab teil hõlpsalt uusi veebilehti koostada. Elemente saate stiilijuhist kopeerida ja kleepida ning neid vastavalt vajadusele ümber korraldada.

Kuna kõik on modulaarne, ei pea te muretsema kujunduse ja koodi järjepidevuse pärast; kuid ärge unustage, et kui kohandate kasutajaliidese komponenti kogu süsteemis, peate muudatustega värskendama stiilijuhendit (või lisama uue komponendi). Et kõik oleks korrastatud, on veebilehtedel töötamiseks parem kasutada mingisugust mallimis- / automatiseerimismeetodit Gulp või Grunt .

Mis järgmiseks? Kujundamine brauseris

Nüüd on teil kasutajaliidese komponentide, kõigi dokumenteeritud elementide ja nendest komponentidest ehitatud veebilehtede keskne hoidla. Sellest hetkest alates on see enam kui tõenäoline disainerid ei pea enam oma lemmik kujundustööriistu avama, kuna enamik kujundusest tehakse otse koodis ja eelvaade brauseris.

Kas pole päris kindel, kuidas konkreetne muudatus disaini mõjutab? Nüüd saate samaaegselt eelvaadata oma disaini erinevates seadmetes ja brauserites, et näha, kuidas pealkirjas muutunud font või nupu suuruse ja värvi muutmine kujundust mõjutavad.

Kui mõjutab suuremate fontide lisamine lehe laadimist kohandatud veebifondide kasutamisel? Saame testida pooleliolevate veebilehtede toimimist selliste teenuste abil Veebilehe test ning teha teadlikke otsuseid tegelike tulemuste kohta. Me ei saa seda kindlasti teha Photoshopis ega Sketchis.

HTML-i ja CSS-iga töötamine ning brauseris töötamine ei pruugi veebisaidi kujundamise ajal iga disaineri jaoks sobida. Kuid kui disainerid tõesti hoolivad sellest, kuidas nende töö erinevates seadmetes ja ekraanisuurustes välja näeb, peavad nad iga kord veenduma, et see on täiuslik. Midagi, mis näeb staatilise kujundusena välja hämmastav, võib mobiilseadme veebibrauseris vaadatuna tunduda vähem soovitav. Nutikad disainerid peaksid veebidisaini üles ehitama ja katsetama keskkonnas, kus kõik näevad neid ... brauseris.

• • •

Lisalugemine ApeeScape'i disainiblogist:

• Tundlik disain - parimad tavad ja kaalutlused
• Kuidas kujundada tõhus maandumisleht
• E-kaubanduse veebisaidi kujundamise ülim juhend
• Veebisaidi ümberkujundamise alused - juhtumianalüüs
• Disaini juhtimisjõud - veebisaidi ümberkujundamise juhtumianalüüs

Põhitõdede mõistmine

Milline on veebisaidi loomise protsess?

1. Valige veebi 2. Domeeninime registreerimine 3. Saidi planeerimine (tüüp, navigeerimine, sisu) 4. Saidi kujundamine ja ülesehitamine 5. Saidi avaldamine 6. Saidi reklaamimine 7. Saidi hooldamine.

vaarika pi 3 Linuxi server

Kui kaua peaks veebisaidi kujundamine aega võtma?

Üldiselt, kuna see sõltub ulatusest, võib tüüpiline sait (50–100 lehte) võtta umbes 14 nädalat (avastamine 3 nädalat, kujundus 6 nädalat, arendus 5 nädalat). Lihtne 10-15-leheküljeline kohandatud kujundussait võtab aega umbes 4-6 nädalat.

Kuidas alustada veebisaidi kujundamist?

Enne disainifaasi sisenemist: 1. kaaluge ja uurige (nt sihtrühm, loov suund, eesmärgid, eelarve, ajaskaala). 2. Sisu ajab disaini nii ajurünnakuks. 3. Kinnitage tehnilised nõuded. 4. Töötage kontuur välja. 5. Elementide paigutuse määramiseks looge traadiraamid.

Kuidas lähete veebisaidi kujundamisel?

Avastamine: 1. Uuringud (nt sihtrühm, loominguline suund, eesmärgid, eelarve, ajaskaala). 2. Ajurünnak. 3. Kinnitage tehnilised nõuded. 4. Töötage kontuur välja. Kujundus: 1. Paigutuse määramiseks looge traadiraamid 2. Visuaalsete töötluste väljatöötamine (nt meeleolulaud, Photoshopi maketid, HTML) 3. Loomingulised ülevaated sidusrühmadega.

Kuidas veebisaiti struktureerida?

Hea saidistruktuur võrdub parema UX-iga. Tavapärane saidistruktuur on SEO ja kasutatavuse seisukohalt kriitilise tähtsusega. Tüüpiliselt püramiidikujuline kuju peaks olema selge navigeerimisega ja kasutajat silmas pidama: 1. Koduleht 2. Sektsioonid 3. Alamkategooriad 4. Üksikud lehed ja postitused.

Kuidas kavandate veebisaidi kujundust?

1. Valige paigutuse tüüp, võttes arvesse saidi vaatamiseks kasutatud seadmete valikut. 2. Määrake struktuur saidikaardi abil. 3. Tuvastage navigeerimisvoog 4. Looge hierarhia tuvastamiseks traadiraamid.