9 av de bästa sätten att presentera en webbplats för en klient

 Mock Up-med tillstånd av renewleeds på Flickr

Mock Up-med tillstånd av renewleeds på Flickr

designfasen för att skapa en webbplats är ganska standard för de flesta webbdesigners men när det gäller att presentera mock upp till en klient innan skivning / kodning designen, vissa problem uppstår så jag gick ut och frågade samhället om hur de presenterar en webbplats design till en klient.

efter att ha filtrerat igenom alla svar och sammanfattat dem är jag nu redo att presentera 9 av de bästa sätten att presentera en webbdesign för en klient, tillsammans med fördelarna och nackdelarna med varje metod.

problemen

som webbkunniga individer är det ganska lätt att förstå och förstå konceptet att mock-ups helt enkelt är statiska bilder som visar hur en webbplats skulle se ut. Men vad många webbdesigners har funnit är att detta koncept är oerhört svårt för kunder att linda huvudet runt.

vi som designers och kommunikatörer försöker göra det klart för kunder att det de tittar på är en statisk och platt bild av deras potentiella webbdesign. Fortfarande, många frågor och kommentarer kommer från kunderna när du presenterar designen, såsom de Verne Ho att skapa Briefing och många andra, har upplevt nedan:

  • Varför fungerar inte någon av länkarna?
  • Hur redigerar jag texten på detta?
  • Varför kan jag inte markera text?
  • webbplatsen är för liten (uppstår eftersom webbläsaren har krympt bilden som standard)!
  • jag gillar inte det vita utrymmet som omger webbplatsen.
  • kan vi centrera webbplatsen?

i viss utsträckning kan jag förstå förvirringen… de tittar på något som ser ut som en webbplats som finns i en webbläsare eller bildvisare, men konstigt, det fungerar inte som en webbplats… uppenbarligen skulle detta faktum väcka frågor.

för att ta reda på vad olika webbdesigners gör för att komma runt dessa problem gick jag och frågade mina vänner på Twitter (Följ mig) och Facebook (Lägg till mig) för att se vad de gör när de presenterar en webbdesign håna upp till en klient.

metoder för att presentera webbdesign Mockups

 Mock Up-med tillstånd av _Marcel_

Mock Up-med tillstånd av _Marcel_

sponsrat meddelande

Adobe Creative Cloud Rabatt

efter att ha fått svar från mina Twitter / Facebook-vänner (stort tack) kom jag till dessa 9 metoder för hur man presenterar en webbdesign håna upp till en klient. I ingen särskild ordning:

placera bilden på en webbsida och skicka dem en länk.

människor kan förmodligen bättre identifiera en bild när den visas som de normalt ser den, till exempel i en webbläsare men det skapar många fler frågor som jag tidigare skisserat ovan.

om du väljer den här metoden försöker du anpassa den genom att ladda upp den till din egen server… använd katalogen/klienter/clientname/index.htm. Ett annat tips här var att använda den gratis .TK-domänleverantören så att du kan skicka dem en länk som http://clientsdomain.tk som också ser ganska professionell ut. Tack för. tk tips Herbert.

skicka en JPEG eller PNG via e-post

att skicka en mockup via e-post är förmodligen det enklaste sättet men det är inte alltid det bästa… vissa användare har små skärmupplösningar vilket innebär att bilden kan krympa vilket innebär fler frågor tillsammans med de andra som jag skisserade ovan.

Använd någon form av webbaserad applikation

sponsrat meddelande

att använda en webbaserad applikation för att visa upp mock-ups förstärker tanken att det är något på ’display’ och det är inte ett levande exempel som kan leda till mindre frågor.

använd webbplatsen CodedPreview

CodedPreview låter dig skapa enkla HTML-förhandsgranskningssidor som visar hur en mall ska se ut när den kodas. (Tack liamuk7 för den här.) Återigen, försök att anpassa det så mycket du kan, skräddarsydd för din klient.

skapa en ’Klientstudio’

istället för att använda en onlinebaserad applikation kan du ställa in din egen ’studio’ på din egen server där klienten kan logga in och visa mock ups (jpg på en html-sida) som de godkänner… du kan lägga till ändringar på samma sida (nya jpg) och när du har godkänt det kan du lägga till en länk för att se den pågående funktionella webbplatsen.

här är ett exempel från IDesignStudios. ”Jag e-postklienter med webbadressen för klientstudio, samt deras klient-ID, användarnamn och lösenord. Du måste ha ett användarnamn/ lösenord för att ens komma in på den första skärmen (w / disclaimer och dropdown av klient-ID). En klient kan bara fortsätta till sitt eget kundområde (som i, alla kunder kan se den första sidan w/ rullgardinsmenyn, men du kan bara logga in på 1 kundområde efter det).”Du kan se en skärmdump av inloggningsskärmen och inuti klientstudion.

exportera mock-ups i PDF

i stället för att spara i jpeg-eller png-format som bara är en bild som kan öppnas i klientens standardbildvisningsprogram, innebär det i PDF-format i de flesta fall att de måste öppna webbplatsen i Adobe Reader. Fördelen med detta är att det finns mindre förväntningar på att det ska fungera som en webbplats. Användningen av lagerkompositioner är också användbar i PDF-filer för att visa variationer av en design.

hoppa över photoshop och design i HTML

det finns några debatter om den här och det kommer vanligtvis ner till vilken process som bäst möjliggör din kreativitet, men den här är för dig att bestämma.

få klienten att komma in på ditt kontor

även om detta inte alltid är möjligt är det vanligtvis det bästa sättet att presentera en webbmock för en klient eftersom det låter dig prata över hela projektet tillsammans med klienten. Om du har denna möjlighet, ta det alltid.

skicka dem en JPEG eller PNG & be dem att skriva ut den

detta var bara en ide jag kom med… om du skickar dem en fullskalig JPEG-mockup av designen och ber dem att skriva ut den, kommer de inte att tro att webbplatsen kommer att fungera som den normalt gör vilket i sin tur kommer att innebära mindre frågor. En nackdel med detta är dock att webbplatsen inte kommer att skala.

ursprungliga svar

sponsrat meddelande

Twitter Logo - Facebook Logo

Twitter Logo-Facebook Logo

nedan är några av de ursprungliga svaren från mina vänner på Twitter och Facebook… återigen tack. Följ mig på Twitter och Lägg till mig på Facebook och medan du är på det, gå med i Just Creative Design Facebook-gruppen.

marioOlckers @justcreative Stealth live installera på servern för att illustrera proof-of-concept och sedan tillbaka till ritbordet efter inmatning och samråd.

netbramha @justcreative PNG, vad sägs om dig?

brianyerkes @justcreative spara den som en jpeg, ladda upp den till en katalog på din server som heter /clients/clientname. Gör ett index.html-sida. Lägg till jpg-bild.

brownaddesign @justcreative jag lägger bara upp designen på min webbserver, i en katalog som jag skapar för klienten och skickar dem en länk för att visa.

marnieb @justcreative i JPG-format. 2025 > metalgod @justcreative jag sätter ihop en PDF med anteckningar och skickar den till klienten. Sedan följer jag upp med ett samtal för att gå igenom dem.

trisnadi @justcreative har klienten sett utkastet tidigare? Jag gör normalt en fullständig promenad igenom innan du låter dem röra den eller ställa frågor.

ClarkleSparkle @justcreative e-post.

sponsrat meddelande

bradsherrill @justcreative låt klienten komma in på ditt kontor och låt dem se i skala 1:1 helst jpeg-format. Om du inte kan göra det maila dem.

jessjoyce @justcreative – vi skickar/laddar upp .PNG i Photoshop / Illustrator docs

spinfly321 @justcreative – Design i photoshop och presentera som en jpg

biwerw @justcreative – skapa en webbsida med .JPG av begreppen på den och skicka dem länken. Hoppas detta hjälper.

liamuk7 @justcreative – precis som en bild eller med http://www.codedpreview.com

idesignstudios @justcreative – jag ger kunder tillgång till sin egen ”klientstudio” – de kan logga in och visa mockups (jpg på en html pg) som de godkänner…jag lägger revisioner på samma sida (nya jpg). När jag har godkänt lägger jag till en länk för att se den pågående funktionella webbplatsen.

marcoslhc @ justcreative – jag levererar i allmänhet några fysiska skisser (papper och färgpennor) till det andra mötet och digitala till 3: e

stevemoseley @justcreative-beror på 2 saker: projektets storlek, och pickiness av klienten. Om antingen-photoshop mockup. Om varken, första klipp av html.

adellecharles @justcreative jag brukar spara för webben och infoga i och html doc / ladda upp till servern bara så att klienten kan se

craftisan @justcreative vad jag gör beror på klienten… ibland live web förhandsvisningar eller pdf/jpg mockups… mestadels JPG.

randaclay @justcreative JPG-fil, eller ibland PDF

EliteByDesign @justcreative vanligtvis bara en JPG via e-post eller laddas upp till min webbplats. Inget fancy, trots allt, det är bara ett första utkast!

pointlessramble @justcreative Stick den i en HTML-fil med alla bakgrunder som behövs / etc.

RyanDownie @justcreative för att presentera mock-ups lägger jag bilden I en katalog på server / namn och lägger sedan till en backgound-bild till kakel full webbläsare

Herbert via FaceBook: Jag laddar vanligtvis upp webbplatsen med en gratis domän www.yourdomain.tk, det är enkelt att omdirigera sökvägen från din värd till den fria domänen.

Steve via Facebook: Vi har en web.yourcompany.com konfigurera och ge klienten webbadressen web.yourcompany.com/client.

Patrick McColley via Facebook: Jag brukar posta det på min server eller om de låter mig, deras.

ytterligare diskussioner

Nedan följer några ytterligare artiklar om detta ämne av mock ups och presentation.

  • Photoshop Mockups vs Client Expectations
  • förbättra din kreativa Process, bättre Design, snabbare godkännanden
  • varför ge kunder mer än bara en Mock Up?
  • Lev av Mockup, dö av Mock Up
  • Client Web Site Mockups & Comps: stör du?
  • Design Mock Ups fungerar inte

de som redan är kopplade till i den här artikeln:

  • hantera Mock Ups
  • Design handlar inte Om verktyg
  • varför hoppar vi inte över Photoshop
  • Design, Mock Ups & verktyg

så jag frågar dig, hur presenterar du dina webbdesignmockups och efter att ha sett de föreslagna metoderna, vad tror du är det bästa sättet?

och om förtjänade, skulle en digg uppskattas. Tack.

Leave a Reply

Din e-postadress kommer inte publiceras.