Drótváztervek (mockup, wireframe) készítése

Slides:



Advertisements
Hasonló előadás
Készítette: Fodorné Varkoly Mária. Amit ma feltölt valaki, az több év múlva is elérhető lesz a világhálón! Ezért érdemes vigyázni milyen tartalmakat teszünk.
Advertisements

Élethosszig tartó tanulás a jobb közérzet érdekében
Web2 és a blogok. Mi az a web2? 1.Filozófia (tartalom) szabadság nyitottság közösség 2.Eszköz(készlet) egyszerűség integráció kompatibilitás mobilitás.
Az Internet adta lehetőségek
Egy ház felépítése 3 és fél hónap alatt a Serbán Bau kft-vel
Interaktív táblák használata Interaktív tananyagok Web 2
Budapest, február 7.. • Brief • A logó • Inspirációk és versenytárselemzés • A honlap • tervezése és végső felépítése • arculata és színrendszere.
Nemzetközi energiahatékonysági kezdeményezések
 W3C Magyar Iroda Megnyitó, szept. 24. A CORES projekt bemutatása Micsik András MTA SZTAKI Elosztott Rendszerek Osztály.
Sámánista elemek a koreai eredetmítoszokban Készítette: Rácz Éva Dátum:
SharePoint 2007 Farkas Bálint. Miért? Vízió a webről: a fejlesztés annyi, hogy „összekattintjuk” a weboldalakat előre megépített komponensekből Pl.: napló.
Az előd – IIS 6 2 Forrás: Secunia, Forrás: Netcraft, August 2007 Web Server Survey Elterjedtség.
Abonyi-Tóth Andor, ELTE Informatikai Kar 1.  A feladatok megoldása során mindig a szemantikailag megfelelő tagek és paraméterek használatára törekedj!
Gödöny Péter ELTE IK, Pataky Szakközép
Virtuális méréstechnika Mérés és adatgyűjtés Mingesz Róbert 2. Óra LabVIEW alapjai szeptember 12., 14.
Virtuális méréstechnika
Kincses Zoltán, Mingesz Róbert, Vadai Gergely
Mérés és adatgyűjtés laboratóriumi gyakorlat Makan Gergely, Mingesz Róbert, Nagy Tamás 2. óra szeptember 9., 10. v
WCAG WEB CONTENT ACESSIBILITY GUIDELINES WEB AKADÁLYMENTESÍTÉSI ÚTMUTATÓ.
Böngésző programok (Böngészés).
„ Minél messzebbre nézel hátra, annál messzebbre látsz előre. „ ( Winston Churchill )
Kereskedelmi és Vendéglátóipari Tagintézménye
Napjaink háttértárolói Készítette: Asztalos Péter Felkészítő tanár: Ing. Mezei Adrianna Iskola: Stredná priemyselná škola - Ipari Szakközépiskola Komárno.
Közösségi portálok használata
A GIMP képszerkesztő program bemutatása
A GIMP képszerkesztő program bemutatása
A közösségi portálok (és használatuk)
Rétegek használata GIMP képszerkesztő programban
A GIMP képszerkesztő program bemutatása (Szűrők alkalmazása)
Egyszerű webes alkalmazás fejlesztése
A kitelepítés, kimenekítés, befogadás, visszatelepítés általános és speciális feladatai Magyarországon „Hallgatók a tudomány szolgálatában” Tudományos.
Nevelési módszerek.
Közösségi oldalak használata
Magyar Optikai Művek (MOM) szervezési, számítógépes tevékenységei
Digitális világ – interaktív táblán
Levelezés, és a többiek Takács Béla Irodalom Bodnár –Magyari: Az Internet használata I. (Kiskapu) Bodnár –Magyari: Az Internet használata.
MeetOFF.eu Képadatbázisok az OSZK-ban avagy képek archiválása és szolgáltatása a XXI. században. Moldován István Országos Széchényi Könyvtár.
Weblapok elrendezésének, dizájnjának kialakítása Borsi Katalin webfejlesztő, oktató NetAcademia Oktatóközpont.
Az ASP.NET programozási modell Ez az előadó neve beosztása vállalata.
Prezentáció készítés MS PowerPoint segítségével
XHTML 1. óra. Miért térjünk át HTML-ről XHTML- re? HTML-szabványban tartalom és forma összemosódott HTML 4.0 szabványban stíluslapok használatát javasolták.
2008. Április 8. Előadó: Schneider Henrik Online alkalmazások e-üzleti használhatósága a PC-s szoftverek kiváltásával.
1 BESZÉDFELISMERŐ RENDSZERES ALKALMAZÁSA AZ ÉRDEKKÉPVISELETI MUNKÁBAN (ELŐKÉSZÍTÉS) A STRATOSZ SZÁMÁRA KIDOLGOZOTT VÁLTOZAT Készült a MAT támogatásával,
SIKERES KAMPÁNYSTRATÉGIÁK KIS- ÉS KÖZÉPVÁLLALKOZÁSOK SZÁMÁRA REKLÁMOK ÉS PSZICHOLÓGIA Kincsesné Vajda Beáta Szegedi Tudományegyetem Gazdaságtudományi Kar.
TIOP 1.1.1/09/ Az Internet lehetőségei a tanulási módszerek alakításában I.Szókincsbővítés játékosan (múlt) II.Rögzítés élményszerűen (jelen)
ResearcherID Integrálása a Web of Science-el Tóth Szász Enikő REUTERS/Regis Duvignau.
Magasszintű automatizált marketing megoldások az e-kereskedelemben
 Római szerződés: 1957március 25.  Európai Ipar fejlődése  1973 olajválság  es évek legnagyobb problémája  80 – s években Amerika és Japán.
Forgatókönyv.
Blogok keresése, keresőoptimalizálás, Google Webmaster Tools
Internet, Elektronikus levelezés
Tananyag: 3. Előadás A HTML nyelv alapjai Kép beillesztés Navigációk
Mindig a legdrágább a legjobb?
Információs rendszer fejlesztése 4. előadás
A természet, mely körülvesz és kiszolgál bennünket, melyben élünk, és amit védeni, az utókornak megőrizni kötelességünk. A programsorozatra szeretettel.
Ez az én művem: Papercraft
Szövegszerkesztés és bemutató készítés.   Minimum 5 oldalas dokumentum.  Szabadon választott (papírt tűrő) témában.  1. oldal fedőlap.  2. oldal.
Abonyi-Tóth Andor 1.  Az eszköz egy modellje, amit oktatási, demonstrációs, használhatósági elemzési, promóciós és egyéb célokra is felhasználható. 2.
Miért érdemes egy cégvezetőnek regisztrálni a …………… közösségi oldalra? Hogyan használjuk ki hatékonyan a jelenlétet a világ legnagyobb szakmai hálózatán?
Budapesti Műszaki és Gazdaságtudományi Egyetem Méréstechnika és Információs Rendszerek Tanszék R „Big Data” elemzési módszerek Kocsis Imre
Multimédia-fejlesztés. 2. számú beküldendő feladat Készítsen el egy multimédia alkalmazást! Neobook for windows szoftverrel Neobook for windows szoftverrel.
Műveletek mappákkal és a fájltípusok
Drótváz Gerstweiler Anikó Éva május 3.. Wireframe I. Más néven képernyőterv vagy sematikus oldal Egy vizuális útmutató, amely honlapok felépítését.
Kapcsolattartó hírlevélküldő rendszer
Balogh Andrea Johanna MKSZ, Siófok április 27.
Tömörítés.
Tibeti homok mandalák.
dr. Geges József Ovidius Co. Ltd.
Műveletek mappákkal és a fájltípusok
Előadás másolata:

Drótváztervek (mockup, wireframe) készítése Abonyi-Tóth Andor

Mockup Az eszköz egy modellje, amit oktatási, demonstrációs, használhatósági elemzési, promóciós és egyéb célokra is felhasználható. http://www.smallsurfaces.com/wp-content/uploads/2008/09/pho_5-1.jpg http://www.interaction-design.org/images/screendumps/mockup_webpage.gif http://www.hiwtc.com/photo/products/17/01/01/10194.jpg

Mockup, wireframe, drótváz Nem működő prototípus Példa a drótváz használatra a web-fejlesztésben Drótváz terv Arculatterv http://www.designquote.net/profile/46389/

Drótváztervezési praktikák Digitális drótváz előnyök Törlés Áthelyezés drótvázon belül és drótvázak közt Átméretezés Háttéranyagok gyors beillesztése Sablonok Minták kéznél vannak Dinamikusság imitálása Elemek könnyebb átemelhetősége Egyszerűbb archiválás Más is könnyedén belenyúl http://ergomania.eu/drotvaztervezesi-praktikak/

Drótváztervezési praktikák Digitális drótváz hátrány Nincs mindig kéznél Gépi környezet blokkolhatja a kreativitást Kevésbé hatékony a közös gondolkozásban Lassabban készül Nagy a kísértés a túlzott kidolgozásra Sok drótváz nehezebben átlátható Kevésbé játékos http://ergomania.eu/drotvaztervezesi-praktikak/

Drótváztervezési praktikák Mi nincs a drótvázon? Színárnyalatok Betűtípusok Végleges képek Pontos arányok Szép ikonok Végleges elhelyezés, arányok http://ergomania.eu/drotvaztervezesi-praktikak/

Mivel készítsünk Mockupot? Számos alkalmazás megfelelő lehet, ezek között vannak ingyenes és fizetős megoldások is. Érdemes itt körülnézni: http://webification.com/best-mockup-design-tools- roundup Személyes javaslat: http://lumzy.com/app/

Gyakorlás Készítsük el az alábbi mockup-okat!

Blog 1.

Blog 2.

Mi lehetett (volna) ennek az oldalnak a drótvázterve? Valósítsd meg!

Vége