Makete web stranica: 4 popularna pristupa za istraživanje

Makete web stranica

Makete web stranica mogu se stvoriti na puno različitih načina. Istina je da ne postoji 'najbolji' pristup, ali ovisno o određenim stilovima i preferencijama dizajnera UI i UX (i procesu dizajna), neki će raditi bolje od drugih.

U ovom ćemo članku pogledati prednosti i nedostatke četiri najpopularnije opcije: UX alati od kraja do kraja, alati za makete, alati za grafički dizajn, kao i kodirani dizajni koji počinju zamagljivati ​​linije između maketa web stranica. i prototipove.



kako napraviti kontaktni list u Photoshopu CS5

Ako konkretno tražite alate za žičano postavljanje, pogledajte ovaj post na najbolji žičani alati , ili za širu kolekciju, pogledajte našu megaobliku najbolji alati za web dizajn .



Generiraj JS natpis

Kliknite sliku da biste saznali više i preuzeli karte(Slika pripisana: Future / Toa Heftiba, Unsplash)

Nemojte pogriješiti misleći da su svi modeli web stranica jednaki. Jednostavne odluke o platformama, vjernosti i kodiranju donijet će znatno drugačije rezultate. Znajte što želite i koji su vaši ciljevi prije nego što uopće započnete postupak dizajniranja - ako želite alat koji podržava sve tri faze, najbolje je započeti s njime nego prebacivati ​​se na pola puta. Isto tako, ako vam treba zvjezdana, potpuno realistična maketa, imajte na umu da ćete kad-tad koristiti uređivač grafičkog dizajna.



01. UX alati s kraja na kraj

Na najvišem su nivou cjeloviti alati kojima je cilj zadovoljiti cjelokupni tijek rada: makete, izrada prototipa, dokumentacija, primopredaja programera i sustavi dizajna. UXPin zadovoljava tu potrebu od početka 2010. godine, ali brojni drugi brendovi, poput Adobea i InVisiona, sada također pokušavaju stvoriti 'jedan alat koji će njima vladati'.

UXPin

UXPin se može pohvaliti robusnim prototipiranjem, maketama, dokumentacijom i primopredajama za programere

Pa kako se ovi alati slažu samo za stvaranje makete? Mogu se bez problema boriti s njima - i onda s nekim. Na primjer, s UXPinom možete stvoriti makete s više stanja i interakcija. Čak oponaša neke značajke Photoshopa i Sketcha uključivanjem alata Pen.



S druge strane, Studio tvrtke InVision , omogućuje prilično lijepo uređivanje animacije; dok Adobe XD omogućuje vam otvaranje datoteka Photoshop i Sketch unutar vašeg XD dizajna te primjenu boja, simbola, linearnih gradijenata i stilova znakova.

kako fotografirati tetovaže na nekome

Studio InVision

Studio by InVision želi stvoriti tijek rada od kraja do kraja

Što je najvažnije, alati od kraja do kraja sada nude dizajnerske sustave kako bi se osigurala dosljednost maketa među projektima. Sustavi dizajna daju svima jedan izvor istine o imovini i principima dizajna u svim alatima. Ako planirate stvoriti puno maketa, ova značajka postaje gotovo obavezna.

Pri odabiru alata za izradu makete web stranice vrijedi uzeti u obzir sljedeće aspekte:

  • Vjernost : Koliko je moćan alat za vizualni dizajn i dizajn interakcija?
  • Dosljednost : Koje značajke osiguravaju dosljednost dizajna u vašem radu?
  • Točnost : Odražavaju li elementi s kojima radite 'izvor istine' u vašoj organizaciji?
  • Suradnja : Možete li surađivati ​​s dionicima ili drugim dizajnerima?
  • Predaja programera : Kako alat generira specifikacije i sredstva za programere?

02. Namjenski alati za makete

Manje robusna rješenja poput Načelo , Framer , Moqups ili Balsamiq i dalje vam može pružiti sve što vam je potrebno za izradu makete - jednostavno ćete izgubiti dodatne značajke tijeka rada i dosljednosti dizajna. Ovi su alati osmišljeni kako bi postupak stvaranja učinili što lakšim, tako da se možete više usredotočiti na stilske odluke, a manje na način manipulacije programom.

Namjenski alati za makete imaju jasne prednosti: početnici imaju koristi od njihove jednostavnosti upotrebe, dok stručnjaci cijene dizajne posebno prilagođene njihovim naprednim potrebama. Na naprednijem kraju, alati poput Framera i Principa specijalizirali su se za animacije i interakcije za makete.

Framer

Alati poput Framera specijalizirani su za interakcije

Na donjem kraju, Moqups i Balsamiq pružaju više funkcionalnosti od alata koji nisu dizajnirani i koji se ponekad koriste za žičane okvire i makete (poput Glavna riječ ), ali ograničeni su samo na dizajne niske vjernosti. Međutim, oni mogu biti vrlo korisni ako je cilj vrlo brzo stvoriti žičane okvire niske vjernosti.

Što se tiče maketa alata, morate odlučiti hoće li jednostavno rješenje žičanog okvira biti dovoljno ili vam treba napredniji dizajn zaslona. Bez obzira koji alat za maketu odabrali, samo provjerite jeste li spremni prihvatiti gubitak u suradničkom tijeku rada i manje značajki dosljednosti dizajna koje nude alati od kraja do kraja.

03. Softver za grafički dizajn

Neki se dizajneri zaklinju u softver poput Photoshop CC , Skica ili Ilustrator CC , posebno oni posebno vješti ili upoznati s alatima koji nude kontrolu do piksela. Platforme za grafički dizajn najbolje funkcioniraju ako ciljate na najvišu razinu realizma i vizualne vjernosti. I kao što smo objasnili u našem vodiču za brzo prototipiranje pomoću Photoshop CC-a , možda je lakše nego što mislite.

Photoshop CC

Photoshop daje preciznu kontrolu, ali možda je pretjeran za jednostavne makete

Rad u softveru za grafički dizajn omogućuje vam pristup gotovo nepreglednom izboru visoko definiranih boja, pa ako radite u okviru ograničenja krute i unaprijed postavljene sheme boja - na primjer, pod određenim pravilima robne marke - tada su ti programi možda najbolji opcija. Ovi programi nude više od opcija boja, više vizualnih alata koji vam omogućuju rješavanje detalja detalja.

Međutim, nedostatak korištenja ove vrste softvera je taj što može biti teško prevesti kada je vrijeme za početak kodiranja dizajna. Ono što je djelovalo u Photoshopu možda neće uvijek raditi u kodu (elementi poput fontova, sjena, efekti gradijenta i tako dalje), što se može pretvoriti u gubljenje vremena na pronalaženje rješenja za fazu izrade prototipa.

kako crtati grafitnim olovkama

Za stranice teške stilu moglo bi vam pomoći da izvučete određene vizualne detalje tijekom faze makete, u tom će vam slučaju Photoshop ili Sketch pružiti najviše mogućnosti. Slično tome, ako imate posla s izbirljivim klijentom ili klijentu kojem je teško udovoljiti, predstavljanjem predivne i impresivne makete moglo bi ih lakše osvojiti.

makete se mogu povući u UXPin

Makete stvorene u Photoshopu ili Skici mogu se povući i ispustiti u UXPin

Također je vrijedno spomenuti da se makete kreirane u Photoshopu ili Sketchu mogu povući i spustiti u fazu izrade prototipa pomoću UXPina. To vam omogućuje jednostavnu animiranje svih slojeva (bez poravnavanja) s nekoliko klikova i osigurava da ne morate kretati od nule kad je vrijeme za izradu prototipa.

Ako vam vizualni prikazi nisu jedini prioritet, možda biste bili učinkovitiji ako koristite alat koji vam omogućuje da na jednom mjestu napravite žičane okvire, makete i izradu prototipova. Softver za grafički dizajn može predstavljati više problema nego što vrijedi za makete, osim ako ne tražite optimalnu vizualizaciju - zasigurno ćete trebati redovito komunicirati sa svojim programerom, jer ti alati nisu dizajnirani za suradnju.

kako nacrtati konja stojeći

04. Kodirane makete

Ako ste uglavnom dizajner i ne sviđa vam se kodiranje, onda to očito nije opcija. Kao što je raspravljeno u Vodič za makete , kodirane makete nisu zadani izbor.

Većina kodiranja može se odgoditi do faze izrade prototipa (ako izrađujete prototip HTML / JavaScript) ili čak i kasnije (ako koristite alat za izradu prototipova). No, unatoč složenosti i potencijalnim preprekama, mnogi su ugledni dizajneri koji zagovaraju uvođenje koda u fazu makete.

Iako poboljšanja u alatima i tehnologiji znače da se otvara sve više mogućnosti u dizajnu izgleda, nije sve lako (ili čak moguće) ponovno stvoriti u kodu. Ako započnete s kodom, odmah ćete znati što možete, a što ne možete učiniti. Ako vam je ugodno s kodom, također se može tvrditi da je počevši s ovim manje rasipno - maketa će ionako završiti u HTML / CSS-u.

No, kao što smo već spomenuli, makete s kodiranjem nisu popularna strategija iz više razloga nego što je poteškoća s kodiranjem. Ako prerano započnete s kodiranjem, to može ograničiti vašu kreativnost i spremnost za eksperimentiranje, jer je lako brinuti o izvedivosti vaših ideja u kodu, a ne o tome koliko bi one mogle izgledati uzbudljivo.

Na vama je kada ćete uvesti kodiranje. Samo budite sigurni da znate svoje ciljeve dizajna i redovno informirajte programere o tome kako dajete prednost značajkama.

Čitaj više: