Inhalt
Websäit Mockups kënnen op vill verschidde Weeër erstallt ginn. Et ass richteg datt et keng "bescht" Approche ass, awer ofhängeg vu gewëssen UI an UX Designer Stiler a Virléiften (an dem Designprozess), e puer funktionnéiere besser wéi anerer.
An dësem Artikel wäerte mir d'Virdeeler an Nodeeler vu véier vun de populärsten Optiounen kucken: end-to-end UX-Tools, Mockup-Tools, Grafik-Design-Tools, souwéi kodéiert Motiver déi fänken d'Linnen tëscht Websäit Mockups ze verschwommen. a Prototypen.
Wann Dir no Wireframing Tools speziell sidd, kuckt dëse Post iwwer déi bescht Wireframe Tools, oder fir eng méi breet Sammlung, kuckt eis Mega-Roundup vun de beschten Webdesign Tools.
- Jargon Buster: Mockups vs Drotframes vs Prototypen
Maacht de Feeler net datt all Websäit Mockups déiselwecht sinn. Einfach Entscheedungen iwwer Plattformen, Fidelitéit a Kodéierung produzéieren all däitlech verschidde Resultater. Wësst wat Dir wëllt a wat Är Ziler sinn ier Dir iwwerhaapt den Designprozess ufänkt - wann Dir en Tool wëllt dat all dräi Phasen ënnerstëtzt, ass et am beschten ufänken et ze benotzen wéi iwwer d'Halschent ze wiesselen. Och wann Dir e stellaren, voll realistesche Mockup braucht, bedenkt datt Dir iergendwann e Grafikdesign Editor benotzt.
01. End-to-end UX Tools
Op der héchster Tier sinn end-to-end Tools déi de ganze Workflow zefridden zielen: Mockups, Prototyping, Dokumentatioun, Entwéckler Handoffs an Design Systemer. UXPin huet dëse Besoin zënter de fréien 2010s geschafft, awer eng Rei aner Marken, wéi Adobe an InVision, probéieren elo och d '"Een Tool fir se all ze regéieren".
Also wéi packen dës Tools just op fir Mockup Kreatioun? Si kënnen se ouni Problem packen - an dann e puer. Mat UXPin, zum Beispill, kënnt Dir Mockups mat méi Staaten an Interaktiounen erstellen. Et miméiert souguer e puer Features vu Photoshop a Sketch andeems en e Pen Tool enthält.
Op der anerer Säit, Studio vun InVision, erlaabt e puer zimlech nitt Animatiouns Editing; wärend Adobe XD léisst Dir Photoshop a Sketch Dateien an Ären XD Designs opmaachen, a Faarwen, Symboler, Lineargradienten a Charakterstiler uwenden.
- Kritt elo Adobe Creative Cloud
Dat Wichtegst, end-to-end Tools bidden elo Design Systemer fir d'Konsistenz vu Mockups iwwer Projeten ze garantéieren. Design Systemer ginn jidderengem eng eenzeg Wourechtquell fir Verméigen an Design Prinzipien iwwer Tools. Wann Dir plangt vill Mockups ze kreéieren, gëtt dës Feature bal obligatoresch.
Wann Dir en End-to-End-Tool wielt fir Är Websäit Mockup ze kreéieren, ass et derwäert d'folgend Aspekter ze berécksiichtegen:
- Fidelitéit: Wéi mächteg ass den Outil fir visuell an Interaktiounsdesign?
- Konsequenz: Wéi eng Features suergen Designkonsequenz an Ärer Aarbecht?
- Genauegkeet: Spigelen d'Elementer mat deenen Dir schafft d '"Quell vun der Wourecht" an Ärer Organisatioun erëm?
- Zesummenaarbecht: Kënnt Dir mat Stakeholderen oder aneren Designer kollaboréieren?
- Entwéckler Handoff: Wéi generéiert den Tool Spezifikatiounen a Verméigen fir Entwéckler?
02. Engagéiert Mockup-Tools
Manner robust Léisungen wéi Principle, Framer, Moqups oder Balsamiq kënnen Iech ëmmer nach alles ubidden wat Dir braucht fir Äre Mockup ze bauen - Dir verléiert just den zousätzleche Workflow an d'Konsistenzfeatures. Dës Tools sinn entwéckelt fir de Kreatiounsprozess esou einfach wéi méiglech ze maachen, sou datt Dir méi op stilistesch Entscheedungen konzentréiere kënnt a manner wéi Dir de Programm manipuléiert.
Engagéiert Mockup-Tools hu kloer Virdeeler: Ufänger profitéiere vun hirer einfacher Benotzung, wärend Experte schätzen d'Designer speziell op hir fortgeschratt Bedierfnesser ugepasst. Am méi fortgeschrattenen Enn spezialiséiert Tools wéi Framer a Principle an Animatiounen an Interaktiounen fir Mockups.
Am ënneschten Enn gi Moqups a Balsamiq méi Funktionalitéit wéi Net-Design Tools, déi heiansdo fir Drotframes a Mockups benotzt ginn (wéi z.B. Keynote), awer si sinn nëmmen op Low-Fidelity Designs limitéiert. Si kënnen awer zimlech nëtzlech sinn wann d'Zil ass Low-Fidelity Wireframes ze kreéieren ganz séier.
Wann et ëm Mockup-Tools geet, musst Dir entscheeden ob eng einfach Wireframing-Léisung just wäert maachen, oder ob Dir méi fortgeschratt Bildschiermdesign braucht. Egal wéi e Mockup-Tool Dir gewielt hutt, gitt sécher datt Dir bereet sidd de Verloscht am kollaborativen Workflow ze akzeptéieren a manner Designkonsequenz Featuren ugebueden vun End-to-End Tools.
03. Grafikdesign Software
E puer Designer schwieren mat Software wéi Photoshop CC, Sketch oder Illustrator CC, besonnesch déi besonnesch qualifizéiert oder vertraut mat Tools déi Kontroll bis op de Pixel ubidden. Grafesch Design Plattforme funktionnéieren am Beschten wann Dir op den héchsten Niveau vu Realismus a visuell Fidelitéit zielt. A wéi mir an eisem Guide fir séier Prototyping mat Photoshop CC erklären, kann et méi einfach sinn wéi Dir denkt.
A Grafikdesign Software schafft gëtt Iech Zougang zu enger bal endloser Auswiel u héich definéierte Faarwen, also wann Dir bannent de Restriktioune vun engem steife a virausgesetzte Faarfschema schafft - zum Beispill ënner bestëmmte Markungsregelen - da kënnen dës Programmer Är Bescht sinn Optioun. Méi wéi Faarfoptiounen, dës Programmer bidden vill méi visuell Tools, fir datt Dir d'Detailer vum Detail packt.
Wéi och ëmmer, den Nodeel vun der Benotzung vun dëser Aart vu Software ass datt et schwéier ka sinn ze iwwersetzen wann et Zäit ass fir den Design ze codéieren. Wat am Photoshop funktionnéiert kann net ëmmer am Code funktionnéieren (Elementer wéi Schrëften, Schatten, Gradient Effekter, asw.), Wat kann zu Zäitverloschter iwwersetze fir Léisunge fir d'Prototyping Phase erauszefannen.
Fir stilschwer Säite kann et hëllefen déi spezifesch visuell Detailer wärend der Mockup Phase auszeschloen, a wéi engem Fall Photoshop oder Sketch Iech déi meescht Optiounen gëtt. Ähnlech wéi wann Dir mat engem nit-picken oder schwéier ze gefale Client ze dinn hutt, mat engem wonnerschéinen an beandrockende Mockup ze presentéiere kéint se méi einfach gewannen.
Et ass och derwäert ze ernimmen datt Mockups, déi am Photoshop oder Sketch erstallt goufen, mat UXPin an d'Prototypéierungsphase verschleeft a fale kënnen. Dëst léisst Iech all Schichten einfach animéieren (keng Offlaachung) mat e puer Mausklicken, a garantéiert datt Dir net vun Ufank un braucht wann et Zäit ass e Prototyp ze maachen.
Wann Visuals net Är eenzeg Prioritéit sinn, kënnt Dir méi effizient sinn mat engem Tool dat Iech erlaabt d'Direframing, d'Mockups a Prototyping alles op enger Plaz ze maachen. Grafikdesign Software ka méi Probleemer sinn wéi et wäert fir Mockups, ausser Dir sicht eng optimal Visualiséierung - Dir musst definitiv regelméisseg mat Ärem Entwéckler kommunizéieren, well dës Tools net fir eng Zesummenaarbecht entwéckelt sinn.
04. Kodéiert Mockups
Wann Dir haaptsächlech en Designer sidd an net bequem mam Kodéiere sidd, ass dat natierlech keng Optioun. Wéi am The Guide to Mockups diskutéiert, kodéiert Mockups sinn net d'Standardwahl.
Déi meescht Kodéierung ka bis op d'Prototyping Bühn verréckelt ginn (wann Dir en HTML / JavaScript Prototyp erstellt) oder nach méi spéit (wann Dir e Prototyping Tool benotzt). Awer trotz der Komplexitéit a potenziellen Hindernisser ginn et vill respektabel Designer déi plädéieren fir Code an d'Mockup Phase anzeféieren.
- 27 Schrëtt fir de perfekte Websäit Layout
Wärend Verbesserungen an Tools an Technologie bedeit datt ëmmer méi Méiglechkeeten am Layout Design opmaachen, ass net alles einfach (oder och méiglech) am Code ze kreéieren. Ufänken am Code léisst Dir Iech direkt wësse wat Dir kënnt a wat net. Wann Dir mam Code bequem sidd, kann et och argumentéiert ginn datt mat dësem manner verschwenden ass - de Mockup wäert souwisou an HTML / CSS landen.
Awer wéi mir virdru scho gesot hunn, Mockups mat Kodéierung sinn net eng populär Strategie, aus méi Grënn wéi d'Schwieregkeet vum Kodéieren. Ze fréi ufänken ze kodéiere kann Är Kreativitéit a Bereetschaft fir ze experimentéieren limitéieren, well et einfach ass sech ëm d'Machbarkeet vun Ären Iddien am Code ze këmmeren anstatt wéi spannend se ausgesinn.
Et ass u Iech wann Dir Kodéierung aféiert. Gitt einfach sécher datt Dir wësst datt Ären Design zielt an d'Entwéckler aktualiséiert halen wéi Dir Feature prioritéiert.
