Előző Lecke

3. házi feladat – Webdesign elkészítése – 2022.12.20-ig – SZW4

Kiemelt linkek

Cél

  • Figma használatának gyakorlása
  • Elrendezések lehetőségeinek gyakorlása

Feladat

2×2 feladat lesz a héten:

  1. Széphegyi Csaba és Sipos Eliza webdesign lemásolása
  2. Széphegyi Csaba és Sipos Eliza webdesign kitalálása és designja a meglévő tartalmakkal

Lépések a 3. házi feladat elkészítéséhez

1. NINCS új tananyag

Az eddig megnézett videókat használjuk fel, és a héten inkább a gyakorlásra fekszünk rá.

2. Drótvázak továbbfejlesztése webdesignná (kb. 3 óra)

Itt az idő, hogy a korábban elkészített, szöveggel felvértezett drótvázakat megtöltsd élettel.

  1. Töltsd le a képeket, amiket az oldalakon használni fogsz.
  2. Töltsd be a képeket, fotókat, háttereket, ikonokat a megfelelő helyekre
  3. Igazítsd, méretezd, alakítsd, rendezd a designt a lehető leghasonlóbbra, mint a végső weboldalon
  4. Ha kész vagy a lehető legpontosabb megoldással, akkor töltsd le a Frame-et .PNG formátumban.

Ha a betűméretek nem ugyanolyanok, és emiatt változnak a szövegtörések, ne foglalkozz vele, a lényeg, hogy nézzen ki az adott betűméretekkel megfelelően.

A Széphegyi Csaba drótváznál a szakasz elválasztó hullámvonalat nem kell megcsinálni!

Amennyiben korábban nem sikerült elkészítened a megfelelő drótvázat, lemásolhatod az általunk felépített verziókat:

3. Készíts saját elrendezéseket a blokkokból (kb. 3 óra)

Hogy jobban megértsd a webdesignt, túllépünk a másoláson, és egyedi webdesignt kell tervezned. A már megépített szakaszaidat egytől-egyik át kell alakítanod egy másféle elrendezésbe.

Az új elrendezés alapja is a WPKurzus UI Drótváz Csomagból készüljön.

A tartalomnak nagy százalékban maradnia kell, de sehol nem használhatod ugyanazt az elrendezést / szakaszt / blokkot!

Egyszerűbb, ha ugyanabban a sorrendben építed a szakaszokat, mivel a tartalom logikája előre meg lett határozva, de ha jobb ötleted van, akkor akár ezt is alakíthatod.

Pár ötlet, hogy mik változhatnak egy elrendezésben:

  • A szövegek helye
  • A képek helye
  • A háttér színe vagy a háttérkép
  • A szövegek stílusa
  • A hierarchia átstrukturálása
  • Bekerülhetnek új képek, fotók, textúrák, hátterek, színek, motívumok, ikonok, figurák
  • Bekerülhetnek akár új szövegek is, ha valamire szükséged lenne még az új elrendezéshez

Lépések a lépésen belül:

  1. Egy új Frame-en dolgozz, de maradj ugyanabban a Design file-ban.
  2. Próbálgass különböző szakaszokat, amikben el tudod képzelni a meglévő tartalmakat.
  3. Illeszd be a szövegeket a designba, rakd őket a megfelelő helyre.
  4. Nyugodtan szerezz ötleteket az Inspirációs Design Raktárból vagy teljesen más weboldalakból.
  5. Ha szükséged van új képekre, hátterekre, elemekre, akkor azokat töltsd le a megfelelő helyekről vagy hozd létre, szerkeszd Canvában vagy bármiben, amit használnál.
  6. Csinosítsd az egész designt.
  7. Ha kész vagy, akkor mentsd le a Frame-et .PNG formátumban.

Házi feladat beküldése – 2022.12.20. 12:00-ig

A másolásos és az új webdesign készítős feladatok megoldását is töltsd fel a megfelelő helyekre.

Ha esetleg nincs időd mindkét projektre, akkor inkább fókuszálj az egyikre, ott csináld meg a másolást és az új design kreálását is.

3. házi feladat – Kész webdesign beküldése

[Nem található a letöltés]

[Nem található a letöltés]

Széphegyi Csaba Figma drótváz

Sipos Eliza Figma drótváz