9 z nejlepších způsobů, jak prezentovat webové stránky klientovi

Mock Up-s laskavým svolením renewleeds na Flickr

Mock Up-s laskavým svolením renewleeds na Flickr

fáze návrhu vytvoření webové stránky je poměrně standardní pro většinu webových designérů, ale pokud jde o prezentaci mock up klientovi před krájením / kódováním návrhu, vznikají některé problémy, takže jsem šel ven a zeptal se komunity o tom, jak prezentují design webových stránek klientovi.

po filtrování všech odpovědí a jejich shrnutí jsem nyní připraven vám představit 9 nejlepších způsobů, jak prezentovat design webových stránek klientovi, spolu s výhodami a nevýhodami každé metody.

problémy

jako webově zdatní jedinci je docela snadné pochopit a pochopit koncept, že makety jsou jednoduše statické obrázky, které zobrazují, jak by web vypadal. Mnoho webových designérů však zjistilo, že tento koncept je pro klienty neuvěřitelně obtížné zabalit si hlavu.

jako designéři a komunikátoři se snažíme klientům objasnit, že to, na co se dívají, je statický a plochý obraz jejich potenciálního designu stránek. Ještě pořád, mnoho otázek a připomínek pochází od klientů poté, co předložíte design, jako jsou ty, které Verne Ho vytvořil Briefing a mnoho dalších, zažili níže:

  • proč některý z odkazů nefunguje?
  • Jak mohu upravit text na tomto?
  • jak to, že nemohu zvýraznit text?
  • web je příliš malý(vyskytuje se proto, že prohlížeč ve výchozím nastavení zmenšil obrázek)!
  • nelíbí se mi bílý prostor, který obklopuje web.
  • můžeme stránky vycentrovat?

do jisté míry chápu zmatek… dívají se na něco, co vypadá jako web, který je uvnitř prohlížeče nebo prohlížeče obrázků, ale kupodivu to nepůsobí jako web… tato skutečnost by samozřejmě vyvolala otázky.

Chcete-li zjistit, co různé webové designéry udělat, aby se kolem těchto problémů jsem šel a požádal své přátele na Twitteru (Následuj mě) a Facebook (Přidej mě) vidět, co dělají při prezentaci web design mock up klientovi.

metody prezentace Maket webového designu

Mock Up-s laskavým svolením _Marcel_

Mock Up-s laskavým svolením _Marcel_

sponzorovaná zpráva

Adobe Creative Cloud Sleva

poté, co jsem dostal odpovědi od svých přátel z Twitteru / Facebook (velké poděkování), jsem přišel k těmto 9 metodám, jak prezentovat webový design mock up klientovi. V žádném konkrétním pořadí:

umístěte obrázek na webovou stránku a pošlete jim odkaz.

lidé mohou pravděpodobně lépe identifikovat obrázek, když se objeví tak, jak ho normálně vidí, například ve webovém prohlížeči, ale vytváří mnohem více otázek, jak jsem již dříve nastínil výše.

pokud zvolíte tuto metodu, zkuste ji přizpůsobit nahráním na svůj vlastní server … použijte adresář / clients / clientname / index.htm. Dalším tipem bylo použití bezplatného poskytovatele domény. tk, abyste jim mohli poslat odkaz, například http://clientsdomain.tk, který také vypadá docela profesionálně. Děkuji za tip. tk Herbert.

odeslat JPEG nebo PNG e-mailem

odeslání makety e-mailem je pravděpodobně nejjednodušší způsob, jak to však není vždy nejlepší … někteří uživatelé mají malé rozlišení obrazovky, což znamená, že obraz se může zmenšit, což znamená více otázek spolu s ostatními, které jsem nastínil výše.

použijte nějakou webovou aplikaci

sponzorovaná zpráva

použití webové aplikace k předvedení maket posiluje myšlenku, že je to něco na „displeji“ a není to živý příklad, který může vést k méně otázkám.

použijte webovou stránku CodedPreview

CodedPreview umožňuje vytvářet jednoduché stránky náhledu HTML, které ukazují, jak by měla šablona vypadat při kódování. (Díky liamuk7 pro tento jeden.) Zkuste to opět co nejvíce přizpůsobit, šité na míru Vašemu klientovi.

Vytvořte „klientské Studio“

místo použití online aplikace si můžete nastavit vlastní „studio“ na svém vlastním serveru, kde se klient může přihlásit a zobrazit makety (jpg na stránce html), které schvalují… můžete dát revize na stejnou stránku (nové jpg) a po schválení můžete přidat odkaz pro zobrazení probíhajícího funkčního webu.

zde je příklad z IDesignStudios. „I e-mail klientům s URL pro client studio, stejně jako jejich ID klienta, uživatelské jméno a heslo. Musíte mít uživatelské jméno / heslo dokonce dostat do první obrazovky (w / disclaimer a rozevírací klient ID je). Klient může pokračovat pouze do své vlastní klientské oblasti (jako v, Všichni klienti mohou vidět první stránku s rozevíracím seznamem, ale poté se můžete přihlásit pouze do klientské oblasti 1).“Můžete zobrazit snímek obrazovky přihlášení a uvnitř klientského studia.

Export maket ve formátu PDF

spíše než ukládání ve formátu jpeg nebo png, což je jen obrázek, který lze otevřít ve výchozím softwaru pro prohlížení obrázků klientů, mít jej ve formátu PDF znamená ve většině případů, že musí otevřít webové stránky v aplikaci Adobe Reader. Výhodou je, že existuje méně očekávání, že bude fungovat jako web. Použití layer comps je také užitečné v PDF pro zobrazení variací návrhu.

přeskočit photoshop a design v HTML

existuje několik debat o tomto a obvykle jde o jakýkoli proces, který nejlépe umožňuje vaši kreativitu, ale tento je pro vás, abyste se rozhodli.

přimějte klienta, aby přišel do vaší kanceláře

ačkoli to není vždy možné, Obvykle je to nejlepší způsob, jak prezentovat klientovi webovou maketu, protože vám umožňuje mluvit o celém projektu společně s klientem. Pokud máte tuto příležitost, vždy ji využijte.

pošlete jim JPEG nebo PNG & požádejte je, aby jej vytiskli

to byl jen nápad, se kterým jsem přišel… pokud jim pošlete maketu JPEG v plném měřítku a požádáte je, aby ji vytiskli, pak si nebudou myslet, že web bude fungovat jako obvykle, což bude znamenat méně otázek. Nevýhodou je však to, že web nebude v měřítku.

původní odpovědi

sponzorovaná zpráva

Twitter Logo-Facebook Logo

Twitter Logo-Facebook Logo

Níže jsou uvedeny některé z původních odpovědí od mých přátel na Twitteru a Facebook … ještě jednou děkuji. Následujte mě na Twitteru a přidejte si mě na Facebook a zatímco vaše na to, připojit se ke skupině Just Creative Design Facebook.

marioOlckers @justcreative Stealth live install na serveru pro ilustraci proof-of-concept a poté zpět na rýsovací prkno po vstupu a konzultaci.

netbramha @justcreative PNG, co ty?

brianyerkes @justcreative uložte jej jako jpeg, nahrajte jej do adresáře na vašem serveru s názvem / clients / clientname. Vytvořte index.stránka. Přidejte obrázek jpg.

brownaddesign @justcreative jen jsem post design na svém webovém serveru, v adresáři jsem vytvořit pro klienta, a e-mailem jim odkaz na zobrazení.

marnieb @justcreative ve formátu JPG. 🙂

metalgod @justcreative sestavil jsem PDF s anotacemi a poslal je klientovi. Pak jsem navázal na výzvu, abych je provedl.

trisnadi @justcreative viděl klient návrh dříve? Normálně dělám plnou procházku, než je nechám dotknout se nebo klást otázky.

ClarkleSparkle @justcreative Email.

sponzorovaná zpráva

bradsherrill @justcreative nechte klienta přijít do vaší kanceláře a nechte je zobrazit v měřítku 1: 1, nejlépe ve formátu jpeg. Pokud to nemůžete udělat, pošlete jim e-mail.

jessjoyce @justcreative-posíláme / nahráváme .PNG Photoshop / Illustrator docs

spinfly321 @justcreative-Design ve Photoshopu a prezentovat jako jpg

biwerw @justcreative-vytvořit webovou stránku s .jpgs konceptů na něm a poslat jim odkaz. Doufám, že to pomůže.

liamuk7 @justcreative-stejně jako obrázek nebo pomocí http://www.codedpreview.com

idesignstudios @justcreative-dávám klientům přístup k jejich vlastnímu „klientskému studiu“ – mohou se přihlásit a prohlížet makety (jpg na html pg), když schvalují…dávám revize na stejnou stránku (nové jpg). Po schválení přidám odkaz pro zobrazení probíhajícího funkčního webu.

marcoslhc @justcreative – obecně dodávám některé fyzické náčrtky (papírové a barevné tužky) na druhé setkání a digitální na 3.

stevemoseley @justcreative-záleží na 2 věcech: velikost projektu a vybíravost klienta. Pokud některý z nich-Photoshop maketa. Pokud ani jeden, první řez html.

adellecharles @justcreative obvykle ukládám pro web a vkládám do a html doc / upload na server, aby klient mohl vidět

craftisan @justcreative co dělám, závisí na klientovi … někdy živé webové náhledy nebo makety pdf/jpg … většinou jpgs.

randaclay @justcreative JPG soubor, nebo někdy PDF

EliteByDesign @justcreative obvykle jen JPG e-mailem nebo nahrané na mé stránky. Nic fantastického, koneckonců, je to jen první návrh!

pointlessramble @justcreative vložte jej do souboru HTML s potřebným zázemím atd.

RyanDownie @justcreative abych představil makety, vložil jsem obrázek do adresáře na serveru /názvu a poté přidal obrázek backgound do úplného prohlížeče dlaždic

Herbert přes FaceBook: obvykle nahrávám web s doménou zdarma www.yourdomain.tk, je snadné přesměrovat cestu z vašeho hostingu na bezplatnou doménu.

Steve přes Facebook: máme web.yourcompany.com nastavení a dát klientovi URL web.yourcompany.com/client.

Patrick McColley přes Facebook: obvykle to zveřejňuji na svém serveru nebo pokud mi to dovolí, jejich.

další diskuse

níže jsou uvedeny některé další články na toto téma maket a prezentace.

  • Photoshop makety vs očekávání klientů
  • Zlepšete svůj tvůrčí proces, lepší Design, rychlejší schválení
  • proč dát klientům více než jen jeden Mock Up?
  • žít maketou, zemřít maketou
  • makety webových stránek klienta & Comps: obtěžujete se?
  • konstrukční makety nefungují

ty, které jsou již spojeny v tomto článku:

  • Správa Mock Ups
  • Design není o nástrojích
  • proč Nevynecháváme Photoshop
  • Design, Mock Ups & nástroje

tak se vás ptám, jak prezentujete své makety webového designu a poté, co jste viděli navrhované metody, co je podle vás nejlepší způsob?

a pokud si zaslouží, digg by byl oceněn. Děkuji.

Leave a Reply

Vaše e-mailová adresa nebude zveřejněna.