Učinkovito oblikovanje enostranskega dokumenta z Adobe XD – Del 1

Z AdobeXDlahko oblikuješ osupljive načrte za spletne strani. Zlasti so Onepagerjizelo priljubljeni, saj omogočajo jedrnato in pregledno predstavitev. V tem priročniku se boste postopoma naučili, kako oblikovati Onepager z različnimi tehnikami. Moj cilj je, da vam pokažem različne možnosti in pri tem podam praktične nasvete, ki vam bodo pomagali optimizirati vaš delovni proces.

Najpomembnejši rezultati

• Naučili se boste, kako ustvariti artboard z idealno spletno ločljivostjo.
• Različne tehnike za postavitev slik z Adobe XD bodo pojasnjene.
• Uvedene bodo zasnove besedila in gumbov za oblikovanje glave.
• Opisani bodo navigacijski elementi in njihova nastavitev v vašem oblikovanju.

Navodila po korakih

Korak 1: Ustvarite nov artboard

Odprite Adobe XD in uporabite bližnjico A za ustvarjanje novega artboarda. Izberite spletno ločljivost 1366x 768 slikovnih pik. Ta velikost je idealna, ker predstavlja standardno ločljivost za mnoge spletne aplikacije. Ko je artboard ustvarjen, povečajte s Command 3, da dobite boljši pregled nad delovno površino. Poimenujte svoj artboard „Onepager“, da ohranite jasno strukturo.

Korak 2: Vstavite ozadje

Za oblikovanjezgornjega dela vašega Onepagerja potrebujete privlačno sliko. Odprite svoj Finder in izberite ustrezno sliko. Povlecite sliko s pomočjo metode povleci in spusti na svoj artboard. Upoštevajte, da upoštevate Retina/Visoko ločljivost za optimalno predstavitev. Pomembno je, da se slika prilagodi okvirju, da ne zamudite področja vidnosti.

Korak 3: Fleksibilna postavitev slik

Namesto da bi sliko neposredno povlekli na artboard, uporabite orodje za pravokotnike (bližnjica R), da določite želeno območje. Povlecite pravokotnik na velikost, ki ustreza želenemu izseku slike. S povlekom slike v pravokotnik se slika samodejno obreže, vi pa lahko prilagodite velikost pravokotnika, ne da bi izgubili razmerja slik.

Korak 4: Dodajte besedilo

Izberite orodje za besedilo s pritiskom na T in kliknite v zgornjem levem kotu vašega artboarda. Tam lahko vnesete naslov ali nadomestno besedilo. Da prilagodite besedilo, uporabite pisave iz svojih slogov odstavkov in izberite ustrezen slog pisave. Na primer, srednja velikost pisave 200 bi bila idealna. Postavite besedilo na želeno mesto, preden preidete na naslednji korak.

Korak 5: Oblikovanje gumba

Pod besedilom dodajte gumb. To lahko storite z ustvarjanjem pravokotnika ali z uporabo gumba iz sredstev. Enostavna in intuitivna uporabniška vmesnik je ključnega pomena za uspeh vašega Onepagerja. Poskusite izbrati barve za gumb, ki se bodo usklajevale z vašim celotnim oblikovanjem.

Korak 6: Ustvarite navigacijske točke

Da bi uporabnikom olajšali navigacijo, ustvarite navigacijske točke. Uporabite orodje za elipse (E), da narišete krog in držite tipko Shift, da dosežete popolno obliko. Z mrežo ponavljanja lahko sedaj hitro ustvarite več navigacijskih točk. Ta funkcija vam omogoča, da brez težav prilagodite razdalje med krogi.

Korak 7: Struktura in organizacija

Da bo vaše oblikovanje pregledno, skupite različne elemente. Tako lahko zagotovite, da je vaše oblikovanje strukturirano in enostavno za obdelavo. Poimenujte skupine ustrezno - na primer „Header“ za zgornji del vašega Onepagerja. Jasna organizacija je še posebej pomembna, ko delate na večjih projektih.

Korak 8: Drobne nastavitve

Ko so vsi elementi na pravem mestu, se vrnite in preverite velikosti pisav, barve in razdalje. Lahko še naprej prilagajate postavitev, da zagotovite, da je vse dobro berljivo in vizualno usklajeno. Poskusite različne barvne variante, da dosežete želeni občutek in izraznost vašega oblikovanja.

Korak 9: Integracija logotipa

Na koncu dodajte svoj logotip v sredino svojega oblikovanja. To lahko storite tako, da ga povlečete iz svojega Finderja na želeno mesto. Prepričajte se, da je logotip po velikosti usklajen z ostalim oblikovanjem, da se lepo vključuje in krepi identiteto blagovne znamke.

Korak 10: Zaključek

Preverite svoje delo in redno shranjujte projekt, da zagotovite, da ne izgubite napredka. Kadarkoli lahko ustvarite predogled oblikovanja, da vidite, kako vaš Onepager izgleda na različnih napravah.

Povzetek – Ustvarjanje Onepagerja z Adobe XD – Del 1

V tem prvem deluAdobe XD priročnika ste se naučili, kako ustvariti artboard, uporabljati različne tehnike za postavitev slik in dodati osnovne elemente, kot so besedilo in gumbi. S prikazanimi koraki lahko učinkovito oblikujete strukturo svojega Onepagerja in pustite odličen prvi vtis.