WEB DIZAJN ZA MODERNE STRANICE

PROGRESIVNI WEB DIZAJN ZA KVALITETNE STRANICE

web dizajn

Dobro reagira web dizajn, po svojoj prirodi, prolazi nezapaženo onima konzumiranje sadržaja na internetu. Dakle, kada netko pita za novu web stranicu, oni su često potpuno nesvjesni koncepta, bez obzira na to doživljava na dnevnoj bazi. Pa ipak, odgovarajući web dizajn je sada priznata kao standardna praksa u cijeloj industriji.

Izgradnja web stranice brza promijenio naše procese, od stvaranja skice kompletnih stranica, izgradnja knjižnice iskoristivih komponenti i izgleda.

WEB DIZAJN IZGLED JE SADRŽAJ UPRAVLJAN I STILOVI SU BRAND-DRIVEN

Nedavno smo bili prilazi postojećeg klijenta da responsively redizajn svoje web stranice. prethodno smo već radili s njima pomoću krute proces slap. Prelazak na okretan rada, bili smo u mogućnosti prihvatiti promjene u bilo kojem trenutku u projektu.

Tijekom procesa smo lijepi na filozofiji da je izgled je sadržaj upravljan i stilovi su brand-driven.

WIRE-OBLIKOVANJE SPECIFIKACIJE

Specifikacija dokumenti rade super za unos svu funkcionalnost site mora imati. No, je li to stvarno ono što klijent treba? To je vrlo teško zamisliti ove značajke na mjestu. Dakle, rezultat je tu specifikaciju dokumenti često se pretvoriti u otečen želja. To ne pomaže klijentu, dizajnera, ili konačni web stranicu.

Umjesto specifikacija dokumenata, odlučili smo da koristite žičane okvire. Prvi korak projekta uključeni stvaranje žice okvire za svaku stranicu. To može zvučati kao overkill, ali su žice okviri dovelo do ranih rasprava o sadržaju i mogućnosti za svaku stranicu. Otkrili smo da ima i da mi nikada uzeti u obzir prije dodani, dok su mnogi uklonjene.

Wire-okviri nam je jasan, vizualni prikaz kako se sadržaj i funkcionalnost treba dati prioritet na svakoj stranici. Te žice okviri zatim postao referentna točka, zamijenivši specifikacija dokument.

Ključne oduzimanje: proizvodnju žice okviri u mjestu specifikacija dokumenata fokusira svima na temeljne značajke i važnost sadržaja.

REVIZIJA

Revizija žice okvire nam omogućuje da se formira popis svih zajedničkih dijelova. Preko jednom mjestu će biti na desetke malih odjeljaka na svakoj stranici koje su vrlo slične. Ove komponente se mogu poredati u iscrpan popis koji će se koristiti kasnije.

Ova faza ima tri glavne prednosti:

  •  To zastave bilo koje razlike u žicu okvire. Misli o tome kao lektura žice okvire. Neka područja mogu biti različiti bez pravog razloga. Možemo vezati cijeli site zajedno prije počnemo gradnju nepotrebne komponente ili izgleda.
  •  To pomaže zadržati sve front-end kod što urednija. Planiranje kako CSS će biti strukturiran je postalo bitno na velikim projektima. Želimo web stranicu da se što je brže moguće i strukturiranju CSS rano pomaže tome.
  •  Veliki web stranice će uključivati ​​više ljudi u bilo kojem trenutku, tijekom razvoja iu budućnosti. Stvaranje održivi kod je važno za projekt kreće naprijed.

Ključno oduzimanje: planiranje kako pristupiti front-end razvoj projekta je važno stvoriti održivi, ​​lean kod baze.

UZORAK KNJIŽNICE

Uzorak knjižnice su skup zajedničkih elemenata koji se koriste na web stranici. Fokusirajući se na front-end razvoj na izgradnji dijelova koji nisu ovisni o stranicama, možemo smanjiti broj iznad glave i povećati konzistentnost.

Korištenje popisa komponenata smo collated u fazi revizije, u mogućnosti smo strukturirati našu Sass u upravljivu zbirku datoteka.

Imenovanje konvencije su važni

Koristili smo uzorak knjižnice na nekoliko projekata, ali su se uvijek borili s pravilima imenovanja, posebno mapu strukturu: gdje ste stavili svoje stilove za ovaj glazbeni player, u komponentama, ili djelomični?

Prije toga, mi bismo bili koristeći terminologiju, kao što su djelomični i komponenti za organiziranje naše SRS datoteke. Iako to izgleda kao sasvim legitimno pravilima imenovanja, oni su otvoreni za interpretaciju. Kada postoji više programere koji rade na projektu, ostavljajući organizaciju koda baze otvoren za interpretaciju vodi neorganizirano CSS.

BEM (Block, Element, Modifikacijska), pruža nam zajedničkoj konvenciji slijediti, i stvara razumijevanje između front-end developera. Stari način je prepušteno pojedinačnim programerima da se s klase imena koja su itekako visokoj razini kako bi prikupio nikakvo značenje od. Srećom smo bili sretni vidjeti Brad Frost govori o svom uzorak knjižnica na unaprijed konferenciji u Manchesteru. Uzorak Lab daje terminologiju iz kemije opisati komponente koje čine knjižnica. Korištenje atoma, molekula i organizama opisati razlike između dijelova na stranici pomaže objasniti koncept razvijen od novih projektu.

Atomi – Essentials

U prirodi, atomi najmanji apoen (osim ako smo kopati u kvarkova i elektrona). U izradu web stranica, atomi su najosnovnije elemente HTML-a. Za sve namjere i svrhe ne učiniti mnogo na svoje vlastite. To uključuje naslove, odlomke, ulaza, gumbi liste … Vi dobijete ideju.

Molekule – skalabilnih obrasci

To su sljedeći sloj gore. U kemiji, molekule se sastoje od atoma, a isto se odnosi na strukturu CSS. Molekule su komponente na web stranice koje koriste atoma ih čine.

Dobar primjer je molekule okvir za pretraživanje. Ovaj sadrže 3 atoma: oznaka, ulaz i tipku.Molekula sloj počinje da se formira neki od elemenata koje možemo koristiti na web stranici.Važno je da sve od tih molekula prilagodljiv. Oni bi trebali biti dizajniran s idejom mogu se koristiti bilo gdje na stranici. Naš krajnji cilj napraviti CSS kao fleksibilna i ponovno upotrijebiti što je više moguće.

Organizmi – zbirke uzoraka

Kao što ime sugerira, organizmi su skupine molekula. Neki primjeri tih su zaglavlja, podnožja, ili popis proizvoda.

Ako uzmemo primjer glavom, to uključuje logo, pretraživanje i navigaciju. Oni su svi bili stvoreni kao molekule i udružuju se u zaglavlje organizam.

Predlošci – Ljepilo za stranicu

Ovo je mjesto gdje biokemija analogija završava. Kao što je Brad kaže, “ući u jezik koji ima više smisla za klijente i konačni izlaz”. Predlošci su ljepilo za web stranice. Oni kombiniraju svi organizmi koje smo stvorili u izgledu koji bi se mogao primijeniti na stranicu na web stranici.

Primjer bi mogao biti jedan blog unos. Ovaj predložak će sadržavati zaglavlje, podnožje, popis blog predmeta i sidebar. Predlošci su uglavnom strukturalne, sadrži samo izgled.

Stranice – varijacije za rukovanje

Završni dio je stranice. Ovo je mjesto gdje možete testirati predloške sa stvarnim podacima.Stranice su konkretni primjeri predloška. Ovaj dio je važno jer nam omogućuje da vidite koliko su uspješni su atomi, molekule, organizama i predlošci bili.

To je neizbježno da prilikom izgradnje web stranice, određeni scenariji će se propustili.Klasičan primjer je dugo naslovi ili ugostiteljstvo za različite valute i jezike.

Ključne oduzimanje: Imenovanje konvencije važno. Raslojavanje CSS stvara čistu codebase raditi od toga je što manja.

PROJEKTIRANJE S FLEKSIBILNOŠĆU U VIDU

Projektiranje uzoraka je teško. Ne možete dizajnirati izolirani uzorak kao što je vijest, i očekujemo da će stati sa ostatkom stranice. Način na koji smo izgraditi web stranice i način na koji smo dizajn ih razlikuju.

DIZAJNI SU VJEROJATNO DA ĆE PROMIJENITI BEZ OBZIRA DA LI SMO DOBILI ODJAVA … ODJAVA POSTALA NEVAŽNA JE KORAK U PROCESU KOJI SE SAMO STAVITI PRITISAK NA OBJE STRANE

Mi smo koristili Photoshop za stvaranje skice žice okvirima s tim uređenih dijelova u mjestu. Nakon što smo bili zadovoljni s izgledom i osjećajem nacrtima preselili smo se izolira svaku komponentu. To nam je omogućilo da se osigura svaka komponenta je dovoljno fleksibilan da rade bilo gdje na web stranici.

Bili smo vrlo svjesni da ne bi odjava na bilo koji rad na dizajnu. Dizajn znak-off stvara prepreku, gdje je dizajner osjeća pritisak stvoriti nešto što će biti postavljen u kamenu. Dizajni su vjerojatno da će promijeniti bez obzira da li smo dobili odjava ili ne. Općenito smo rado primiti bilo kakve promjene u bilo kojem trenutku u projektnom traci. Prijavite-off postaje nebitno je korak u procesu koji se samo staviti pritisak na obje strane na štetu odnosa.

Premještanje iz Photoshop da kod brzo

Poznavajući kada da se presele iz Photoshop koda je važno. Ovaj korak je mnogo ranije nego što smo bili nekad iz dva razloga:

  1. Usavršavanje izgleda u Photoshop je vremena i na kraju gubitak vremena. Vrijeme usavršavanju web stranice je bolje proveo na kraju, na stvarni broj.
  2. To stvara referentnu točku za ono što je web stranica trebala izgledati. Stvarnost je, ona nikada neće izgledati identično; ali jednom klijent je vidio (i usavršeni) dizajna, očekivanje je stvorio.

Umjesto trošenja dodatnog vremena u Photoshopu smo se odlučili uložiti vrijeme u kodu.Ako treba usavršiti ništa, to bi trebao biti kod, malo koji će zapravo biti korišten i vidjeti sve korisnike web-mjesta. Za nas, Photoshop je alat za stvaranje stil dizajn koji se može koristiti preko web stranice.

Dizajn je mnogo više o suradnji svima u timu. Skice su još uvijek vrlo važan dio procesa, pomaže klijentu da vizualizira kako je site će izgledati. Ako smo bili sretni s općeg smjera dizajna, mi bi ga premjestiti u kodu. Rijetko smo proveli vrijeme ide naprijed i natrag izrade izmijeni na Photoshop dokumenata.

Ključno oduzimanje: Photoshop je izvrstan alat za stvaranje dizajnerske koncepte.Prelazak na broj čim prije je važno. Usavršite se u kodu, a ne Photoshop.

PONOVITI ZA BOLJU ISKORISTIVOST

Ljepota ovog tijeka rada je što postoji toliko mnogo mjesta za pregled i poboljšanje web stranice.

Važno je imati na umu da su to sitni koraci u našem procesu projekta. Ako nam je potrebno nešto novo tijekom projekta, mi ćemo uglavnom tretiraju ga kao samostalan, modularne komponente koje se mogu pao u web stranice i usvojiti dizajn temu stranice.

  •  Na wire-oblikovanje fazi planiramo projekt
  •  U fazi revizorske ćemo pregledati i poboljšati žice okvire
  •  U fazi projektiranja smo mockup stil dizajn
  •  U fazi kodiranja smo sve to integrirati zajedno

Svaki od tih koraka pruža do točke gdje možemo pregledati naš rad do sada. Ona također omogućuje svježim set oči da vidi stvari iz druge perspektive.

Tijekom bilo kojeg od tih faza možemo naći da su neki dijelovi ne rade, kao što se očekivalo.To je u redu. U stvari, to je dobro. Hvatanje slabu iskoristivost rano je ključ za uspješnu web stranicu. Vraćajući i žičane-oblikovanje tih dijelova web stranice će se projekt bolje kad se ide uživo.

Ključno oduzimanje: Ne bojte se vratiti na početak, ako nešto treba poboljšati. Hvatanje tih ranih će projekt bolje kad se ide uživo.

ZAVRŠITI

Proveli smo dan raditi zajedno kako bi se osiguralo da svaki dio web stranice je završio na visoki standard. Testirali smo onoliko scenarija je moguće, čime se osigurava iskustvo pregledavanja bio dosljedan.

Nakon što su podaci na web stranici smo u mogućnosti u potpunosti testirati web stranicu. To je često previše lako postaviti projekt uživo u potpunosti bez ispitivanja. Možemo provjeriti brzinu, jednostavnost navigacije i što je najvažnije toka nabave.

Svatko spominje Apple zato što perfekcionista, ali siguran sam da su njihovi prvi pokušaji bili su daleko od savršenog. Potrebno je vrijeme i predanost kako bi one konačne poboljšanja kako bi nam dati proizvode koje danas vole. Koristeći naš laboratorij uređaja, koji uključuje većinu popularnih uređaja i platformi, bili smo u mogućnosti kako bi se osiguralo da je iskustvo je optimiziran na što mnoge od najnovijih platformi i veličina ekrana što je više moguće.

RETROSPEKTIVAN

Učenje iz svakog projekta je važno da možemo kontinuirano poboljšavati procese koji dovode do boljih web stranica.

Ovaj projekt je nastao vlastite in-house uzorak knjižnice koja potiče konzistentnost između projekata. Kada se radi o web dizajn studio imamo desetke projekata koji su trenutno u razvoju istovremeno. Sposobnost za svakoga da radi na bilo kojem projektu je važno.

Stvaranje baze svi možemo raditi na pomoći će doprinijeti tom cilju.

Performanse web stranice je u obzir samo pri kraju projekta. Uspješan reagiraju web stranice treba biti suho i brzo. Ogroman raspon uređaja i njihovih mogućnosti masovno varirati od potpuno novi Mac računala za stare pametnih telefona. Prilikom izgradnje medijski bogate web stranice je može biti vrlo teško upravljati performansama, pogotovo kada retrospektivno pokušavajući ga poboljšati.

U unaprijed konferenciji u Manchesteru, vidjeli smo Yesenia Perez Cruz govoriti o obzirom učinkovitost u svakoj fazi projekta, uključujući i dizajn. Gledajuci unatrag, to je nešto što smo trebali provoditi. Kao tim više dizajneri, programeri i front-end developera, upravljanje ukupnu veličinu i učinkovitost (posebno doživljava izvedbu) bi trebao biti veći prioritet.

Sve na stranici ima svoju cijenu za izvedbu. Davanje prioriteta ono što je važno osigurava website je ne samo brzo, ali dostupna na više uređaja. Na nekim starijim uređajima, otkrili smo da je web stranica nije pala samo preglednik, nego cijeli uređaj. Pokušaj da se ubrza web stranice retroaktivno značilo nismo mogli napraviti web stranicu kao brzo kao što je moglo biti.

Sljedeći put mi ćemo se pobrinuti učinkovitost ukorijenjen u svakoj fazi postupka, tako da nije primisao.

 

admin

Leave a Reply

Your email address will not be published. Required fields are marked *