Forestil dig eller tænk på den kunde, der kommer til dig og beordrer dig til at designe en hjemmeside. Det kan være, at du skal designe det tema, den skal bruge, og at det vil være det første indtryk, som det vil efterlade på de tusinder eller millioner af mennesker, der skal besøge det. Hvordan ville du præsentere det for ham? Ville du tage skærmbilleder af en hjemmeside, hvor du har arbejdet på designet og vise dem det? Ville det ikke være bedre at bruge en web-mock up?
Venter, Vidste du ikke, at der også var en web-mock up? Nå, så interesserer dette emne dig. Og meget. Fordi du kan give din præsentation en bedre tilstedeværelse og få kunden til at gå meget gladere af sted efter at have set billeder, hvor det ser ud til, at hjemmesiden allerede er operationel. Og sandheden er, at det ikke vil koste dig så meget at gøre det.
Hvad er en hjemmeside mockup
Lad os først og fremmest forklare lidt, hvad en hjemmeside mock up. Som du ved, er en mockup faktisk en "rigtigt billede"-repræsentation, der viser, hvordan det endelige resultat af dit arbejde ville se ud.
I tilfælde af en hjemmeside, ville være et billede af resultatet af den pågældende webside.
Denne type collage de bruges til at give mere realisme til arbejdet, da den mange gange, når du præsenterer den, kan være tom eller ikke repræsentere hundrede procent, hvad du har gjort. Derudover har klienten en mere visuel måde at få en idé på.
Og du vil sige, hvorfor ikke vise ham den hjemmeside, du har arbejdet på? Det kunne lade sig gøre, men ikke som en præsentation af arbejdet men du bliver nødt til at lade klienten navigere på nettet for at han lærer hende grundigt at kende, og mange gange har de ikke tid til det, så du sikrer dig ikke, at han har set alt.
På den anden side, med en web-mockup ville du opnå det, fordi du ville fremhæve alt, hvad du vil se på disse billeder.
Hvordan er de lavet
Hvordan er disse web-mock-ups lavet? Er der et program til at lave dem? Er det collage, der er taget fra internettet?
faktisk der er flere gratis værktøjer at de kan give dig en hånd til at skabe disse, og at de kan give dig muligheder, ikke kun med de eksempler, som vi skal give dig lidt senere.
Med dette kan du endda oprette en samling af dem til den pågældende klient, og sætte designet i forskellige sekvenser, der får det endelige resultat til at se meget bedre ud.
Disse værktøjer er:
Gliffy
Dette værktøj er online og det er gratis. Med det kan du oprette web mock up fordi har mange skemaer og en API, hvormed du kan få arbejdet gjort på få minutter.
Faktisk er det en af de mest brugte og det giver dig mange muligheder.
Kakao
I dette tilfælde skal vi advare dig om, at selvom vi vil fokusere på gratis del, værktøjet det er også betalt og det betyder vil være mere begrænset i hvad du kan.
For at få en idé kan du kun eksportere ind PNG (så det er ikke så tilpasseligt, hvis du vil bruge det med andre klienter).
Det gode er, at hvis du arbejder med et team, kan du arbejde sammen på samme tid (dvs. i realtid).
Afkøl
Afkøl er et af værktøjerne kan gøre en hjemmeside til en wireframe og med det arbejde med kunden viser dig nettet efter din smag. Men selvfølgelig, her ville det være nødvendigt at vælge et billede af en computer, tablet eller mobil for at montere resultatet af dette program.
Som du måske har gættet, giver alle værktøjerne dig et billede af webdesignet, men det ville være nødvendigt rent faktisk at samle det i et rigtigt billede. Til dette skal du tilgå billeder, hvor computere, mobiler, tablets vises for at indsætte dit design ovenpå og få et billede, der forener begge dele (og som ser godt ud).
For at gøre dette kan du bruge færdige mockups eller oprette dem selv med et billedredigeringsprogram.
Web mock up, som du kan downloade
Hvis du ikke ønsker at overvælde dig selv for meget til at præsentere værket, så efterlader vi dig her nogle eksempler på hjemmeside mock up som du kan downloade og bruge. Du vil spare tid.
Realistisk hjemmeside mock up
Vi starter med en scene, som enhver kunne have. Det er et skrivebord og en computerskærm på toppen (tastatur og mus forneden). I baggrunden en reol med bøger. Denne reol er dog i sort og hvid, ligesom de dekorative elementer på skrivebordet (flere bøger og en lampe) og væggen, som er i en grå tone.
Hvorfor? Så blikket er fokuseret på den side, som skærmen viser. i dit tilfælde kunne være hjemmet til siden, eller repræsentative dele, som du ønsker at vise kunden.
Du downloader det her.
Simpel hjemmeside mockup
En mere simpel repræsentation, hvor den med en grå baggrund (selvom den kan tilpasses) ikke viser en skærm, hvor vi vil have indsat websiden.
Det skiller sig ud, at hvis man ser på skærmen, har den en lysere del og en mørkere del, fordi den simulerer, at lyset falder på den.
Dette kan være interessant for dele, hvor du ønsker klienten ser udelukkende på dem.
Du downloader det her.
Samsung Galaxy S5 Mockup
Dette er især en mockup af Samsung Galaxy S5, men det kan være perfekt for dig at vise, på samme billede, tre dele af det webdesign, du har lavet, så klienten værdsætter, hvordan det ville se ud på en mobil.
Husk, at Google nu giver virksomheder mere end bruge en responsiv hjemmeside, altså at det ser godt ud, uanset om du bruger en computer, en tablet eller en mobil. Derfor er det ikke nok, at det ser godt ud på computeren, man skal sørge for på alle andre platforme.
Du kan downloade det her.
Mockup til tablet og mobil
I dette tilfælde vil du ikke kunne vise 100 % af nettet på en tablet, men det kan du på mobilen. Og det er, at hvis du vil vise dit design på disse to enheder, kan du også gøre det, så kunden får en idé om, hvordan det vil se ud.
Selvfølgelig skal du huske det på tabletten vil den blive vist i liggende format mens mobil vil have det lodret. Det er en måde for ham at se dit design ændre sig, så det passer til begge enheder.
Du har det her.
Har du nogle eksempler på web-mock up? Du kan dele dem i kommentarerne.