Share
I dag, i del 2 av denne massive opplæringen fortsetter vi denne økten med den andre designdagen. Vi har allerede designet hjemmesiden - så nå skal vi designe de fire støttesidene som danner resten av hele nettstedet design (Portefølje, Bloggliste, Blogginnlegg og Kontaktskjema-siden). La oss dykke inn skal vi?
Du finner mange webdesign og utviklingsopplæringer ute på nettet? men svært få nøtter som tar deg fra start til slutt. Mange opplæringsprogrammer er kun for design, og andre er bare for koding. I dag starter vi en ny serie hvor vi skal designe og utvikle et komplett nettsted fra grunnen av; Vi tar deg fra den første wireframe til hele nettstedet design (inkludert 5 sider). Da kodes vi for design (i Nettuts selvfølgelig) og til slutt konverterer dette komplette XHTML-temaet til et fungerende WordPress-tema!
Sjekk hele prosessen som det skjer på vår sesjonsside!
La oss kort gjennomgå våre prosjektmål som vi satte opp på Dag ett:
Vårt mål er å designe og utvikle et enkelt nettsteddesign med et moderne layout som bidrar til CMS-systemer som WordPress. Vi vil ikke bruke noen vilde og sprø stil effekter i vårt design (poenget her er å holde det enkelt), men vi skal nærme seg hele prosessen, fra begynnelse til slutt som en studie i layout og riktig bruk av marginer og polstring.
Vi bruker 960-rutenettet fra start til slutt - og dette vil ikke være noe annerledes for vår design i dag to.
En kort kursoversikt. Vi kan bryte dette opp annerledes når vi treffer kodingsfasen, men dette bør gi deg en god ide om hvor vi er på vei med denne serien:
La oss begynne med å ta en titt på hva vi skal skape:
Dagens designfase er også delt i fire deler, og vi vil designe alle de andre sidene i Iconify i denne sesjonen. Når vi har designet hjemmesiden allerede, har vår primære oppgave blitt fullført - så vi trenger bare å fylle ut blanke for resten av nettstedkartet.
Dette er et viktig skritt som ofte overses i mange designprosjekter, men utforming av noen spesifikasjoner for disse støttesidene er noe du ikke vil hoppe over. Husk at et webdesign er ikke komplett etter at du bare har konfigurert hjemmesiden - i det minste trenger du et par ekstra maler designet for de ekstra sidene som utgjør et nettsted.
Siden vår layout er ganske rett frem, skal vi bare bytte ut det primære innholdsområdet for hver side. De universelle nettstedelementene (Header, Navigation, Footer) vil alle forbli de samme fra en side til den neste. Dette er viktig for å holde et solid fundament for nettstedet slik at brukerne alltid vet hvor de er.
Porteføljesiden er den første støttesiden som vi skal designe. Husk at vi bruker 960 Grid-systemet for hele nettstedet design, så vi bruker samme grunnleggende layout og kolonnestruktur som vi installerer på hjemmesiden design.
Lag en duplikat av index.psd fil og endre navn på det til portfolio.psd. Åpne den opp med Photoshop. Slett alt fra innsiden innhold laggruppe bortsett fra bg lag.
Lag nå "breadcrumbs" og "notes" lagene for porteføljesiden. For "Notes" -bakgrunnsformen, bruk de samme lagsstilene som vi gjorde det for nylig prosjekt's Bar rektangel. Bruk bilde E - 1a som en retningslinje.
Deretter skal vi bruke en enkel teknikk til å arbeide i en håndfull forskjellige kolonnevariasjoner på denne siden for våre porteføljeartikler.
Bruk bildeopprettingsmetoden fra første dag (trinn C3) for å lage to kolonneporteføljeposter som vist på bildet E - 2a. Hvis du husker, tegner vi bare i rektangler som passer til kolonnestyrene, bruker en lagestil og deretter beskjærer i bilder for å lage en subtil grenseeffekt.
Gjenta nå samme teknikk for tre kolonne- og fire kolonneporteføljeposter. Bruk bilde E - 2b og E - 2c som en retningslinje. Vær oppmerksom på at vi blar mellom de forskjellige 12_column og 16_column guide lagene for å få dette perfekt. Endelig organisere lagene dine som vist i bildet E - 2d.
Bloglisten-siden er ment å være stedet der "utdrag" av hvert blogginnlegg vises. Disse "utdragene" kalles også "loop" -elementer - og består vanligvis av en tittel, miniatyrbilde, en kort tekstforhåndsvisning og noen metainformasjon (som dato, forfatter, koder, etc.).
Akkurat som vi gjorde med den siste siden, begynner vi å lage en duplikat av portfolio.psd side og omdøpe den til blogs.psd. Inne i blogs.psd-filen, slett alt i indeksmappen bortsett fra bg, brødsmuler, og sider lag. Nå har vi en tom bloggfil, vi kan begynne å fylle den med noe innhold.
For første gang skal vi bruke en standard to kolonnebloggoppsett - en for innhold og en annen for sidebjelken. Bruk bilde F - 1a som retningslinje for å designe blogg- og sidebarinnholdet - legg merke til at vi har plassert den vertikale separasjonslinjen mellom to av kolonnene, slik at den er perfekt plassert.
Den faktiske utformingen her er ganske enkel, så vi kommer ikke til å gå for mye i detalj - følg bare de angitte reglene for type lagene (den røde teksten på eksemplene), og bruk alle stilene vi allerede har satt opp på våre andre sider. Vær spesielt oppmerksom på avstanden mellom elementer (også merket med rød tekst) som det skal fortelle deg nøyaktig hvor du skal plassere alt.
Når du er ferdig, organisere lagene dine som vist i bildet F - 1b.
Nå som vi har oppsettet for Blog List-siden, trenger vi en mal for hvert fullt blogginnlegg. Dette er en ganske heftig side når det gjelder innhold fordi vi også trenger å planlegge for et kommentarsystem og mange andre små detaljer. Vær særlig oppmerksom på eksempelbildene i denne delen!
Igjen, start med å lagre blogs.psd fil med et navn på blog-post.psd. Innsiden blog-post.psd, Slett alt innholdet på blogglisten, slik at vi kan begynne å friske. I innholdsdelen, ta tak i tekstverktøyet ditt og begynn å fylle med litt tekst og bilde som vist på bildet G - 1a.
Tegn et rektangel og bruk samme lagsstiler av nylig prosjekt's Bar fra index.psd-filen. Befolk det med innhold og posisjon som vist på bildet G - 2a. For de horisontale linjalformatene, vennligst sjekk bildet G - 2b.
Tegn et rektangel med 630px bredde og hvilken som helst høyde for nå. Navngi det bg og legg den inn i en laggruppe som heter kommentarer. Kopier lagstiler fra populære postboksens bg, og lim deretter til dette laget. Bruk bilde G - 3a som en retningslinje.
I kommentarfeltens piler tegner du en trekant i kommentarfeltet (aktiver Legg til i formområdet mens tegning) måle 10X10px roter pilen og plasser dem som vist på bildet G - 3b og bruk lag stilene som vist i bildet G - 3b.
Vi forlater en 40px venstre margin for den andre kommentaren for å indikere at dette er et svar. Ved å bruke denne samme teknikken kan vi gå enda dypere - vise en tredje, fjerde eller femte svardybde ved bare å indusere ytterligere 40px for hvert nivå. Vi gjør det samme i vår XHTML-versjon, så husk disse grunnleggende stilreglene.
Tegn et annet rektangel med samme stil som kommentarer's bg lag og navnet på dette laget bg. Plasser den inne i en laggruppe som heter kommentar skjema. Bruk bilde G - 4a som en retningslinje.
En gang til, kopier blogs.psd og lim det inn med et navn på contact.psd. Åpne den i Photoshop. Slett alt unntatt breadcrumbs og sidebar fra innhold laggruppe. Kopiere kommentar skjema og lim det inn som vist på bildet H - 1a. Skriv igjen innholdet som vist på bildet.
Du får merke til at mye av dette er repetisjon nå - vi kopierer bare / limer inn innhold, passer den til støttelinjene som vi vil bruke, og bruker de samme typografiene og lagformatene fra de forrige sidene.
Ting bør bevege seg ganske raskt når du er ferdig med denne siden. Du kan gjenta den samme grunnleggende prosessen for så mange sider som du trenger å mockup - hold deg bare til kolonnestyrene og bruk de samme grunnleggende typografiske og lagstilsreglene for hvert nytt design og burde kunne slå flere av dem som du kan trenge veldig raskt.
Dette avslutter den andre delen av vår massive opplæring! Nå har vi utviklet vårt nettsted. I neste sesjon (kommer snart over på Nettuts), skal vi starte kodingsprosessen, så sjekk tilbake her (og på Nettuts) når vi legger inn de nye delene av denne opplæringen!
Accentsconagua