Adobe Reflow websuunnittelijalle
•Download as PPTX, PDF•
1 like•3,541 views
Adobe Edge Reflow käyttö websuunnittelussa.
Recommended
More Related Content
Similar to Adobe Reflow websuunnittelijalle
Similar to Adobe Reflow websuunnittelijalle (20)
More from Corellia Helsinki
Adobe Reflow websuunnittelijalle
- 1. Adobe Edge Reflow ADOBE EDGE REFLOW KÄYTTÖ JA ROOLI WEB-TYÖNKULUSSA
- 2. Kari Selovuo Corellia Helsinki Oy ◦ Vilhonkatu 5A, 00100 Helsinki ◦ Kari Selovuo, Partner, Advisor, ACI, ACP ◦ kari@corellia.fi ◦ 044 0700 700 ◦ http://fi.linkedin.com/in/kariselovuo/ ◦ @KariSelovuo
- 3. Corellia Helsinki Oy Corellia Helsinki on Adobe auktorisoima koulutuskumppani, AATC. Koulutamme, konsultoimme, autamme ja toteutamme Kaikki julkaisemisen muodot ovat meille tuttuja: Printti, sähköinen, tablet -julkaisut sekä web-suunnittelu ja toteutus http://corellia.fi/
- 4. Tästä materiaalista Nämä kalvot ovat otanta Corellia Helsinki Oy:n kurssimateriaalista. Käyttöoikeus (Copyright) ◦ Tämän materiaalin omistaa Corellia Helsinki Oy
- 5. Adobe Edge tuoteperheestä Web-tuotantoon tarkoitetut työkalut ◦ Animate ◦ Reflow ◦ Code ◦ Inspect ◦ Edge Web-fonts ◦ Typekit ◦ PhoneGap Build
- 6. Photoshop suunnitteluvälineenä Photoshop on aiemmin “väärinkäytetty” web-suunnittelun työkalu Photoshop on pikselinmuokkausohjelma, josta puuttuu mm. web konseptin käsitteet ◦ Sivut (page) ◦ Tilat (state: hover, visited…) ◦ Skaalautuvuus (responsiiviset sivut) ◦ Ei kunnolla tuettua työnkulkua suunnittelijalta kehittäjälle ◦ Reflow kytkös on edistystä samoin CSS sääntöjen saaminen suoraan Photoshopista Viime vuosina Adobe alkanut lisäämään eri sovelluksiin web-suunnittelua helpottavia lisätoiminnallisuuksia
- 7. Photoshop: plussat ja miinukset Photoshoppiin on lisätty Web-suunnittelua tukevia ominaisuuksia on mm. ◦ Web assettien helppo generointi ◦ CSS koodin tuottaminen ◦ Vektorityökalut Mikä on edelleen pielessä web-suunnittelun näkökulmasta ◦ Usean sivun suunnittelu ei mielekästä (tasot/Layers ei ole ratkaisu) ◦ Ei edelleenkään tukea responsiivisille leiskoille ◦ Generoitu CSS koodi ei parasta mahdollista (koodaajan näkökulmasta)
- 8. Vaihtoehtoisia työtapoja web-suunnitteluun Design in browser ◦ Wireframen koodaus suoraan HTML elementeiksi ja CSS asemointi ◦ Pelkkä rautalankamalli tai graafiset elementit sisältäen Photoshop ◦ PSD / PDF asiakkaalle ◦ PSD:n tarkastelu selaimessa CC tiedostojaosta (uusi ominaisuus julkaistu 21.8.2014) Photoshop + Edge Reflow ◦ PSD leiskasta generoitu Reflow projekti, joka tuottaa HTML mockup:n asiakkaalle Edge Reflow ◦ Leiskan suunnittelu suoraan Reflow:ssa, kuvat Photoshopista tai Illustratorista
- 9. Photoshopista Reflow taittoon Photoshop osaa luoda Reflow projektin Generoi kuvaelementit Luo PSD:ssä tehdyn asemoinnin automaattisesti ◦ DOM rakenne ei oikea html – taittoon ◦ Edellyttää manuaalista muokkausta
- 10. Photoshop leiskan oikea rakenne Jos haluat viedä Photoshop designisi Reflow ohjelmaan, rakenna tiedostosi oikein Käytä tasojen yhdistelyssä ryhmittelyä ja nimeämistä (mieti tulevaa HTML sivua ja DOM –rakennetta) Käytä tiedostotarkenninta nimeämisessä ◦ Generointi tuottaa halutun tiedoston ◦ Voit listata useita tiedostonimiä eri asetuksilla ◦ JPG, PNG, GIF ◦ Tiedostokoko ◦ Pakkaustaso ◦ PNG bittisyvyys ◦ Hakemisto, johon tiedosto luodaan http://helpx.adobe.com/photoshop/using/generate-assets-layers.html
- 11. Assettien generointi Photoshopista Generoi kuvat web-käyttöön ◦ File / Generate / Image Assets Luo Reflow –projekti ◦ Generate / Edge Reflow Project ◦ Luo Reflow projektitiedoston ◦ Generoi myös kuva-assetit
- 12. Reflow käyttötarkoitus Tuottaa HTML sivun elementit ja niiden asemointisäännöt Mahdollistaa uusien CSS muotoilujen käyttämisen ◦ CSS Regions (tekstin juoksutus elementistä toiseen) ◦ Filtterit Mockuppien generointiin tai koodarille lähtökohdaksi
- 13. Reflow työnkulku Kaksi vaihtoehtoa ◦ Aloitetaan tyhjästä ◦ Photoshopista tuodun leiskan muokkaus Suunnitellaan desktop –näkymä Lisätään breakpointit ja säännöt pienemmille näytöille Testaus ja esittely asiakkaalle
- 14. Reflow: Ehdotettu työnkulku Photoshop ei ymmärrä selaimen DOM rakennetta ◦ Photoshopista tuodun layoutin rakenne edellyttää työlästä elementtien ryhmittelyä ja järjestämistä Refow:ssa ◦ Ilman tätä organisointia eri layouttien suunnittelu hankalaa – layout hajoaa pahasti Edotukseni – Kuvaelementit Photoshopissa ja Layout Reflow:ssa ◦ Suunnittele sivun rakenne aloittamalla se Reflow ohjelmassa ◦ Toteuta asemointi käyttäen “laatikoita” (Box eli div -elementti) ◦ Lisää sivulle Photoshopissa tuotetut kuvat ja muu sisältö Älä turhaan odota Photoshopista tuodun leiskan toimivan automaattisesti Reflowssa!
- 15. Reflow projektin luonti File – New Project Vain yksi projekti kerrallaan avoinna Aloita käyttö tutustumalla Welcome –projektiin ◦ Help – Open Welcome Project
- 16. Reflow käyttöliittymä Tärkeimmät asetukset paneleissa ◦ Layout ja Styling Huomaa, että kyseessä ei ole piirto-ohjelma ◦ Kaikki säädöt ovat CSS –arvoja ◦ HTML ja CSS osaamisesta apua Työkaluja vähän ◦ Valinta, Box, Teksti, Kuva ja Lomake-elementit
- 17. Reflow käyttöliittymä Elements paneelissa sivun DOM rakenne Muita valintoja ◦ Edge Inspect testaus ◦ Asset Library ◦ Pages ◦ Photoshop CC connect
- 18. Reflow käyttöliittymä Dokumentin alla on DOM ”valitsin” sekä koodinäkymä valitun elementin CSS koodiin ◦ Osoittaa myös eri media query - lohkojen omat säännöt
- 19. Layoutin luonti Piirrä layout Box –työkalulla ◦ Tuottaa HTML div elementtejä Aseta elementin ominaisuudet Layout ja Styling paneeleissa Asemoinnin kannalta tärkeää ◦ Size % = joustava, px = kiinteä ◦ Advanced kohdassa asemointisäännöt ja kellutus ◦ Float
- 20. Layoutin luonti Nimeä elementit! ◦ Aivan kuten tasojen nimeäminen ◦ Tärkeää sivun myöhemmän käytön kannalta ◦ Helpottaa DOM rakenteen hahmottamista ◦ Mieti nimet hyvin ◦ Tulevat CSS class -määreiden nimiksi ◦ Käytä kuvaavia nimiä
- 21. Layoutin luonti Luo ensin ”rautalankamalli” ◦ Pelkkiä asemointielementtejä ◦ Voit kopioida elementtejä piirtämisen sijaan ◦ Visuaalisten tyylien kopiointi ◦ Siirtäminen ja liikuttaminen helppoa myös suoraan hiirellä raahaamalla ◦ Siirtäminen vaikuttaa DOM rakenteeseen ◦ Vältä ”oransseja” – negatiivisia margin arvoja
- 22. Kuvien lisääminen sivulle Kaksi tapaa ◦ Lisää kuva suoraan sivulle omaksi elementiksi DOM rakenteeseen ◦ Aseta kuva div -elementin taustakuvaksi Taustakuvalle asetettavissa enemmän sääntöjä
- 23. Elementin taustakuva Styling – Backgrounds Yleisesti hyviä sääntöjä ◦ Position – center ◦ Scaling – cover ◦ Background Position Y säännöllä voit siirtää kuvaa pystysuunnassa ◦ Scale Y skaalaa kuvaa Vaikutus näkyy elementin koon muuttuessa
- 24. Teksti: Lisääminen Tekstityökalun napsautus lisää yksirivisen tekstikentän Vedä työkalulla alue, johon lisäät pitkän teksti ◦ Aseta tekstikentän isäelementin korkeudeksi auto, jolloin se skaalautuu tekstin mukana
- 25. Tekstin asemointi elementissä Tekstin asemointi elementin sisälle: Best practices ◦ Aseta isäelementille padding ◦ Poista tekstielementiltä margin määreet ◦ Aseta tekstikentän leveydeksi 100%
- 26. Tekstin muotoilut: Fontit Käytettävissä Edge Webfonts kirjasimet ◦ Styling – Typography – Typeface Muotoiltavissa kaikki mikä CSS säännöillä tehtävissä ◦ Väri, tasaus, koko, paino, välistys … Myös Typekit fontit käytettävissä
- 27. Tekstin ja elementtien ryhmittäminen Edit – Group ◦ Ryhmittää elementit yhdeksi ◦ Liikuteltavissa yhdessä Ryhmällä silti oma layout ◦ Voivat siirtyä paikoiltaan tilan pienentyessä ◦ Korjaa asettamalla ryhmälle kiinteä koko ◦ Asemoi ryhmä omana elementtinään (float)
- 28. Assets Assets paneelissa näkyvät projektiin lisätyt kuvat ◦ Monestiko kuvaa on käytetty ◦ Mikäli kuvaa on muokattu projektin ulkopuolella ◦ Muokatun kuvan päivityspainike ◦ Kuvan Replace painike, jolla kuvan voi vaihtaa toiseen
- 29. Tuonti Illustratorista copy – paste liittäminen ◦ Kopioi elementit Illustratorissa ◦ Liitä Reflow ohjelmassa Tekee sivulle <img> elementin, jonka src attribuutiksi kuva .SVG muodossa ◦ Varsin hyvin selaimissa tuettu ominaisuus ◦ Ei IE8 ja vanhemmat
- 30. Photoshop liitos Voit liittää .PSD tiedoston suoraan Reflow ohjelmaan Tuo .PSD tiedostossa olevat kuvat asset kirjastoon Säilyttää kytköksen tiedostojen välillä ◦ Muokkaus ja päivitys
- 31. Tilat (states) Voit asettaa elementeille eri muotoilut ◦ Hover ◦ Active ◦ Focus Hyödyllinen erityisesti linkeillä
- 32. Linkit, navigaatio Lisää linkki ulkoiseen osoitteeseen tai toiseen sivuun ◦ Page käytettävissä jo projektissa on muitakin sivuja ◦ Kirjoita ulkoinen osoite URL – kenttään ◦ Avaa ulkoiset linkit uuteen ikkunaan
- 33. Lomake-elementit Reflow:ssa on muutamia lomake-elementtejä ◦ Painike ◦ Text input ◦ Pudotusvalinta ◦ Checkbox ◦ Radiobutton
- 34. Asemointi ja Media Queryt Asemointi vaatii kokeilua ja oikeiden asetusten hakemista Reflow rikkoo välillä DOM:n ◦ Jos jokin näyttää hajoavan asemoinnissa, tarkista DOM rakenne Ennen asemointia kannattaa huolehtia, että sivu on ◦ Valmis, kaikki elementit jo lisätty ja muotoiltu ◦ Elementit ryhmitetty ja sijoitettu asemointia varten laatikoiden (div) sisään Eri layout asetuksilla voi muuttaa myös kaikkia elementtien visuaalisia tyylejä Media Queryn oikea paikka määräytyy sisällön mukaan ◦ Lukumäärää ei rajoitettu
- 35. Asemointi Kavenna näkymää kunnes tulee tarve muokata sisältöä Lisää ensin Break Point Muokkaa sen jälkeen elementin ominaisuuksia ◦ Tallenna ja testaa usein Testaa myös selaimessa ◦ Todettu ongelma ettei näkymä toistu aina samoin selaimessa ja
- 36. Sivujen lisääminen projektiin Lisää uusi sivu (+) ◦ Luo uuden tyhjän sivun Duplicate ◦ Luo kopion avoimesta sivusta ◦ Usein paras lähtökohta, sillä sivuilla kuitenkin toistuvia elementtejä ◦ Käytä vasta kun duplikoitavan sivun toistuvat elementit ovat valmiit (navigaation ym.)
- 37. Projektin vienti jatkokäsittelyyn File – Export for Code Editor ◦ Tallentaa projektin valittuun sijaintiin Kaikki koodi muokattavissa missä tahansa web-editorissa Viimeistään tässä vaiheessa arvostaa hyvin nimettyjä elementtejä ◦ DOM!
- 38. Mietteitä Reflowsta Reflow on yksi haara työnkulussa Älä tavoittele täydellistä siirtymää Photoshopista web-sivuksi Ei jatkumoa kooditasolla Reflow:sta lopputuotteeseen, joka kuitenkin tehdään pääosin jollekin sisällönhallintajärjestelmälle Mihin käyttää Reflow:ta ◦ Mockup sivujen tekemiseen ◦ Alustava sivujen suunnittelu, koodin jatkokäsittely rajallista ◦ Rautalankamallien suunnitteluun ◦ Parhaimmillaan kuitenkin yksinkertaisten staattisten sivustojen toteuttamiseen jopa tuotantoon (tämä varauksella)
- 39. Mietteitä Reflowsta Reflow on aivan erinomainen tuote suunnittelijoille, konsulteille ym. tuottamaan asiakkaille toiminnallinen malli verkkosivustosta Tämän avulla voidaan testata suunnitelman toimivuus sekä erilaisilla päätelaitteilla käytettävyys Reflow on osa Adobe Creative Cloud työnkulkua ja hyödyllinen lisä Halutessasi oppia aiheesta lisää tutustu Corellian kurssitarjontaan: ◦ http://corellia.fi/web-koulutukset/adobe-creative-cloud-websuunnittelijan-tyokalut-ja-tyonkulku/ ◦ http://corellia.fi/web-koulutukset/#kurssiluettelo
- 40. Kiitos Kysymyksiä, ajatuksia, toiveita, kommentteja? Corellia Helsinki Oy ◦ Vilhonkatu 5A, 00100 Helsinki ◦ Kari Selovuo, Advisor, ACI, ACP ◦ kari@corellia.fi ◦ 044 0700 700 ◦ http://fi.linkedin.com/in/kariselovuo/ ◦ @KariSelovuo