webbplats mock up

webbplats mockup

Föreställ dig eller tänk på den klienten som kommer till dig och ger dig i uppdrag att designa en webbplats. Det kan vara så att du måste designa temat som den ska använda, och att det blir det första intrycket som det kommer att lämna på de tusentals eller miljoner människor som ska besöka det. Hur skulle du presentera det för honom? Skulle du ta skärmdumpar av en webbplats där du arbetade med designen och visa den för dem? Skulle det inte vara bättre att använda en webbmodell?

Väntar, Visste du inte att det också fanns en webbmodell? Tja, då intresserar det här ämnet dig. Och mycket. För att du kan ge din presentation en bättre närvaro och få kunden att lämna mycket gladare efter att ha sett bilder där det verkar som att hemsidan redan är i drift. Och sanningen är att det inte kommer att kosta dig så mycket att göra det.

Vad är en webbplatsmockup

Först av allt, låt oss förklara lite vad a webbplats mock up. Som du vet är en mockup faktiskt en "riktig bild"-representation som visar hur det slutliga resultatet av ditt arbete skulle se ut.

När det gäller en webbplats, skulle vara en bild av resultatet av den webbsidan.

Den här typen av collage de används för att ge verket mer realism, eftersom många gånger, när du presenterar den, kan den vara tom eller inte representera hundra procent vad du har gjort. Dessutom har kunden ett mer visuellt sätt att få en idé.

Och du kommer att säga, varför inte visa honom webbplatsen du har arbetat på? Det skulle kunna göras, men inte som en presentation av arbetet utan du måste låta klienten navigera på webben för att han ska lära känna henne ordentligt och många gånger har de inte tid att göra det, så du ser inte till att han har sett allt.

Å andra sidan, med en webbmockup skulle du uppnå det eftersom du skulle markera allt du vill se i dessa bilder.

Hur är de gjorda

Nu, hur är dessa webbmodeller gjorda? Finns det något program för att skapa dem? Är det collage som är hämtade från Internet?

faktiskt det finns flera gratisverktyg att de kan ge dig en hand för att skapa dessa, och att de kan ge dig alternativ, inte bara med de exempel som vi ska ge dig lite senare.

Med detta kan du till och med skapa en samling av dem för den klienten, sätta designen i olika sekvenser som gör att det slutliga resultatet ser mycket bättre ut.

Dessa verktyg är:

Gliffy

Detta verktyg är online och det är gratis. Med den kan du skapa webbmock up eftersom har många scheman och ett API med vilket du kan få jobbet gjort på några minuter.

I själva verket är det en av de mest använda och det ger dig många alternativ.

Kakao

I det här fallet måste vi varna dig för att även om vi kommer att fokusera på gratis del, verktyget det betalas också och det betyder kommer att vara mer begränsad i vad du kan göra.

För att få en idé kan du bara exportera in PNG (så det är inte så anpassningsbart om du vill använda det med andra klienter).

Det som är bra är att om du arbetar med ett team kan du arbeta tillsammans samtidigt (dvs. i realtid).

Verifiera

Verifiera är ett av verktygen kan förvandla en webbplats till en trådram och med det, arbeta med kunden visar dig webben efter dina önskemål. Men naturligtvis, här skulle det vara nödvändigt att välja ett foto av en dator, surfplatta eller mobil för att montera resultatet av detta program.

Som du kanske har gissat ger alla verktyg dig en bild av webbdesignen, men det skulle vara nödvändigt att faktiskt montera den i en riktig bild. För detta måste du komma åt bilder där datorer, mobiler, surfplattor visas för att kunna infoga din design ovanpå och få ett foto som förenar båda (och som ser bra ut).

För att göra detta kan du använda färdiga mockups eller skapa dem själv med ett bildredigeringsprogram.

Webbmodell som du kan ladda ner

Om du inte vill överväldiga dig själv för mycket för att presentera verket, här lämnar vi några exempel på webbplats mock up som du kan ladda ner och använda. Du kommer att spara tid.

Realistisk webbplats mock up

Realistisk webbplats mock up

Vi börjar med en scen som vem som helst skulle kunna ha. Det är ett skrivbord och en datorskärm ovanpå (tangentbord och mus nedan). I bakgrunden en bokhylla med böcker. Den här bokhyllan är dock i svart och vitt, liksom de dekorativa delarna av skrivbordet (fler böcker och en lampa) och väggen som är i en grå ton.

Varför? Så att blicken är fokuserad på sidan som visas av monitorn. i ditt fall kan vara hemsidan för sidan, eller representativa delar som du vill visa kunden.

Du laddar ner den här.

Enkel webbplatsmockup

Enkel webbplatsmockup

En enklare representation, där den med en grå bakgrund (även om den kan anpassas) inte visar en skärm där vi kommer att ha infogat webbsidan.

Det sticker ut att om du tittar på skärmen har den en ljusare del och en mörkare del, eftersom den simulerar att ljuset faller på den.

Detta kan vara intressant för delar där du vill kunden tittar uteslutande på dem.

Du laddar ner den här.

Samsung Galaxy S5 Mockup

Samsung Galaxy S5 Mockup

Detta är i synnerhet en mockup av Samsung Galaxy S5 men det kan vara perfekt för dig att i samma bild visa tre delar av webbdesignen som du har gjort så att kunden uppskattar hur den skulle se ut på en mobil.

Tänk på att Google nu ger företag mer än använda en responsiv webbplats, det vill säga att det ser bra ut oavsett om du använder en dator, en surfplatta eller en mobil. Därför räcker det inte med att det ser bra ut på datorn, man måste se till på alla andra plattformar.

Du kan ladda ner den här.

Mockup för surfplatta och mobil

Mockup för surfplatta och mobil

I det här fallet kommer du inte att kunna visa 100 % av webben på en surfplatta, men det kan du på mobilen. Och det är att om du vill visa din design på dessa två enheter kan du också göra det, så att kunden får en uppfattning om hur det kommer att se ut.

Naturligtvis, kom ihåg det på surfplattan kommer den att visas i liggande format medan mobil kommer att ha det vertikal. Det är ett sätt för honom att se din design förändras så att den passar båda enheterna.

Du har det här.

Har du några exempel på webbmockup? Du kan dela dem i kommentarerna.


Innehållet i artikeln följer våra principer om redaktionell etik. Klicka på för att rapportera ett fel här.

Bli först att kommentera

Lämna din kommentar

Din e-postadress kommer inte att publiceras.

*

*

  1. Ansvarig för uppgifterna: Miguel Ángel Gatón
  2. Syftet med uppgifterna: Kontrollera skräppost, kommentarhantering.
  3. Legitimering: Ditt samtycke
  4. Kommunikation av uppgifterna: Uppgifterna kommer inte att kommuniceras till tredje part förutom enligt laglig skyldighet.
  5. Datalagring: databas värd för Occentus Networks (EU)
  6. Rättigheter: När som helst kan du begränsa, återställa och radera din information.