Se for deg eller tenk på den kunden som kommer til deg og gir deg i oppdrag å designe et nettsted. Det kan være at du må designe temaet som den skal bruke, og at det vil være førsteinntrykket det vil etterlate på de tusener eller millioner av mennesker som skal besøke det. Hvordan vil du presentere det for ham? Ville du tatt skjermbilder av et nettsted der du jobbet med designet og vist det til dem? Ville det ikke vært bedre å bruke en nettmodell?
Venter, Visste du ikke at det også var en nettmodell? Vel, da interesserer dette emnet deg. Og mye. Fordi du kan gi presentasjonen din en bedre tilstedeværelse og få kunden til å gå mye mer fornøyd etter å ha sett bilder der det ser ut til at nettsiden allerede er operativ. Og sannheten er at det ikke vil koste deg så mye å gjøre det.
Hva er en nettsidemockup
Først av alt, la oss forklare litt hva a nettsted mock up. Som du vet, er en mockup faktisk en "ekte bilde"-representasjon som viser hvordan det endelige resultatet av arbeidet ditt vil se ut.
Når det gjelder et nettsted, ville være et bilde av resultatet av den nettsiden.
Denne typen collage de brukes til å gi mer realisme til arbeidet, siden mange ganger, når du presenterer det, kan det være tomt eller ikke representere hundre prosent hva du har gjort. I tillegg har klienten en mer visuell måte å få en idé på.
Og du vil si, hvorfor ikke vise ham nettsiden du har jobbet på? Det kunne gjøres, men ikke som en presentasjon av arbeidet, men du må la klienten navigere på nettet for at han skal bli grundig kjent med henne, og mange ganger har de ikke tid til å gjøre det, så du er ikke sikker på at han har sett alt.
På den annen side, med en webmockup ville du oppnå det fordi du ville fremheve alt du vil se i disse bildene.
Hvordan er de laget
Nå, hvordan lages disse webmodellene? Finnes det et program for å lage dem? Er det collage som er hentet fra Internett?
faktisk det finnes flere gratis verktøy at de kan gi deg en hånd til å lage disse, og at de kan gi deg alternativer, ikke bare med eksemplene som vi skal gi deg litt senere.
Med dette kan du til og med lage en samling av dem for den kunden, og sette designet i forskjellige sekvenser som får det endelige resultatet til å se mye bedre ut.
Disse verktøyene er:
Gliffy
Dette verktøyet er online og det er gratis. Med det kan du lage web mock up fordi har mange skjemaer og et API som du kan få jobben gjort med i løpet av få minutter.
Faktisk er det en av de mest brukte og det gir deg mange alternativer.
Kakao
I dette tilfellet må vi advare deg om at selv om vi skal fokusere på gratis del, verktøyet det er også betalt og det betyr vil være mer begrenset i hva du kan gjøre.
For å få en idé kan du bare eksportere inn PNG (så det er ikke så tilpassbart hvis du vil bruke det med andre klienter).
Det som er bra er at hvis du jobber med et team kan du jobbe sammen samtidig (dvs. i sanntid).
Bekreft
Bekreft er et av verktøyene kan gjøre en nettside til en каркасные og med det, jobbe med klienten viser deg nettet etter eget ønske. Men selvfølgelig, her ville det være nødvendig å velge et bilde av en datamaskin, nettbrett eller mobil for å montere resultatet av dette programmet.
Som du kanskje har gjettet, gir alle verktøyene deg et bilde av webdesignet, men det ville være nødvendig å faktisk sette det sammen i et ekte bilde. For dette må du få tilgang til bilder der datamaskiner, mobiler, nettbrett vises for å sette inn design på toppen og få et bilde som forener begge (og som ser bra ut).
For å gjøre dette kan du bruke ferdige mockups eller lage dem selv med et bilderedigeringsprogram.
Web-mock-up som du kan laste ned
Hvis du ikke ønsker å overvelde deg selv for mye til å presentere verket, her legger vi igjen noen Eksempler av nettsted mock up som du kan laste ned og bruke. Du vil spare tid.
Realistisk nettsted mock up
Vi starter med en scene som alle kan ha. Det er et skrivebord og en dataskjerm på toppen (tastatur og mus under). I bakgrunnen en bokhylle med bøker. Denne bokhyllen er imidlertid i sort og hvit, det samme er de dekorative elementene på skrivebordet (flere bøker og en lampe) og veggen, som er i en grå tone.
Hvorfor? Slik at blikket er fokusert på siden som vises av skjermen. i ditt tilfelle kan være hjemmet til siden, eller representative deler som du ønsker å vise kunden.
Du laster den ned her.
Enkel nettside mockup
En enklere representasjon, hvor den med en grå bakgrunn (selv om den kan tilpasses) ikke viser en skjerm der vi skal ha satt inn nettsiden.
Det skiller seg ut at hvis du ser på skjermen, har den en lysere del og en mørkere del, fordi den simulerer at lyset faller på den.
Dette kan være interessant for deler der du ønsker klienten tar kun hensyn til dem.
Du laster den ned her.
Samsung Galaxy S5 Mockup
Spesielt dette er en mockup av Samsung Galaxy S5, men det kan være perfekt for deg å vise, i samme bilde, tre deler av webdesignet du har laget slik at klienten setter pris på hvordan det ville se ut på en mobil.
Husk at Google nå styrker bedrifter mer enn bruke en responsiv nettside, altså at det ser bra ut enten du bruker datamaskin, nettbrett eller mobil. Derfor er det ikke nok at det ser bra ut på datamaskinen, du må sørge for på alle andre plattformer.
Du kan laste den ned her.
Mockup for nettbrett og mobil
I dette tilfellet vil du ikke kunne vise 100 % av nettet på et nettbrett, men det kan du på mobilen. Og det er at hvis du vil vise designet ditt på disse to enhetene, kan du også gjøre det, slik at klienten får en ide om hvordan det vil se ut.
Selvfølgelig, husk det på nettbrettet vil det vises i liggende format mens mobil vil ha det vertikal. Det er en måte for ham å se designen din endre seg slik at den passer til begge enhetene.
Du har det her.
Har du noen eksempler på web-mock up? Du kan dele dem i kommentarene.