52 nástrojov na návrh webu, ktoré vám pomôžu pracovať inteligentnejšie v roku 2021

Najlepšie nástroje na návrh webu: Photo by John Kappa on Unsplash
(Obrázkový kredit: Foto John Kappa na Unsplash)
Strana 1 z 2: Strana 1 SKOČ DO:

V dnešnej dobe existuje toľko skvelých nástrojov na návrh webu. Bez ohľadu na to, aký problém sa snažíte vyriešiť v pracovnom postupe webového dizajnu, je pravdepodobné, že niekto preň vytvoril nástroj, či už je to samostatný nástroj alebo funkcia vo väčšej aplikácii. A hoci sa komunita webdizajnu od začiatku veľmi zmenila, stále existuje duch zdieľania vašej práce, takže veľa z týchto skvelých nástrojov je zadarmo.

Šírenie nástrojov je veľkým prínosom, ale môže vás tiež nechať rozmaznávať výberom, pretože existuje toľko spôsobov, ako robiť to isté. V tomto článku sme zhrnuli to, čo si momentálne myslíme, že sú najlepšími nástrojmi. Nie je to samozrejme vyčerpávajúci zoznam, ale dúfajme, že zúžením a zvýraznením tých najlepších ponúk vám uľahčíme zostavenie správnej súpravy nástrojov pre váš pracovný tok.

Pretože je to pomerne dlhý zoznam, usporiadali sme nástroje do sekcií, ktoré uľahčujú navigáciu v článku. Na tejto stránke nájdete kompletný softvér pre návrh webových aplikácií, nasledovaný základnými špecializovanými nástrojmi pre wireframing a rámcami a knižnicami webového dizajnu. Na druhej strane je celá škála menších a špecializovanejších nástrojov na všetko, od práce s obrázkami až po fušovanie do AR a VR.



Pokiaľ ste tu, možno budete chcieť skontrolovať súhrny súborov najlepšie webhostingové služby a najlepší tvorcovia webových stránok na rok 2020

kresby perom a atramentom pre začiatočníkov

Generovať banner JS

Kliknutím na obrázok získate ďalšie informácie a zakúpite si letenky(Obrázok: © Future / Toa Heftiba, Unsplash)

Kompletné návrhové nástroje

01. Štúdio InVision

Cieľom aplikácie InVision je byť jediným nástrojom používateľského rozhrania

Cieľom aplikácie InVision je byť jediným nástrojom používateľského rozhrania, aký kedy budete potrebovať(Obrázkový kredit: InVision)

Štúdio InVision si kladie za cieľ pokryť všetky základy a byť jediným nástrojom používateľského rozhrania, ktorý budete potrebovať. Dodáva sa s množstvom funkcií, ktoré vám pomôžu vytvárať nádherné interaktívne rozhrania vrátane nástrojov na rýchle prototypovanie, responzívny a kolaboratívny dizajn a prácu s návrhovými systémami.

Ak už InVision používate s nástrojmi ako Skica, vo funkciách je pomerne veľa crossoverov. Sila spoločnosti Studio však spočíva v oddelení prototypov, najmä ak váš návrh zahŕňa animáciu. Rýchle prototypy vám umožnia vytvárať zložité a nápadité prechody, ktoré vám umožnia skutočne dosiahnuť požadovanú úroveň animácie. Jednoducho zistite, ako sa má vaše používateľské rozhranie pozerať na začiatok jeho prechodu, a potom navrhnite konečný výsledok. InVision Studio za vás urobí zvyšok.

Okrem toho môžete tieto vlastné animácie a prechody vytvárať z množstva gest a interakcií, ako je prejdenie prstom, klikanie a vznášanie.

Keď ste hotoví, exportujte svoje prototypy prostredníctvom InVision a pozvite ľudí na spoluprácu. Svoj projekt si môžete prezrieť na zamýšľanej platforme - vynikajúci spôsob, ako preskúmať a vyskúšať svoj dizajn. Klienti potom budú môcť komentovať návrh.

Na začiatok toho môžete prestať myslieť na vytváranie početných kresliacich plátov pre viac zariadení - nástroj na rozloženie Studio automaticky upraví váš návrh na ľubovoľnú obrazovku. Tento šetrič času vám dáva priestor na oveľa viac premýšľania o vašom dizajne.

02. Náčrt

Skica nahradila Photoshop ako nástroj na návrh používateľského rozhrania, ktorý si vybrali mnohí weboví dizajnéri [Obrázok: Bohemian Coding]

Skica nahradila Photoshop ako nástroj na návrh používateľského rozhrania, ktorý si vybrali mnohí weboví dizajnéri [Obrázok: Bohemian Coding](Obrázkový kredit: Bohemian Coding)

Bohemian Coding Skica je jednou z najbežnejšie používaných platforiem webového dizajnu; je to vysoko výkonný vektorový nástroj na spoločné vytváranie rozhraní a prototypov. Skica bola vyvinutá špeciálne na vytváranie webových stránok a aplikácií, takže rozhranie neobsahuje zbytočné funkcie a je rýchlejšia a efektívnejšia ako softvér so širším záberom.

Rory Berry, kreatívny riaditeľ v spoločnosti Superrb , prešiel na Sketch v roku 2017 a veľmi to odporúča. „V porovnaní s Photoshopom je triedenie všetkých vašich dokumentov a vykonávanie revízií v Skici oveľa jednoduchšie,“ začína svoje rozprávanie. „Skica má malé dokumenty, zatiaľ čo Photoshop veľké. Pretože ide o vektorovú aplikáciu, veľkosti súborov sú v porovnaní s Photoshopom dramaticky menšie. “

A to nie je všetko. „Vstavaný mriežkový systém v aplikácii Sketch je vynikajúci a výrazne uľahčuje návrh rozhrania. Myslím si, že vďaka celkovému používateľskému rozhraniu a minimálnemu pocitu je návrh omnoho čistejší a užívateľsky prívetivý. Photoshop sa v porovnaní zdá byť veľmi komplikovaný. “

Komunita ponúka stovky Načrtnite doplnky aby bol váš návrhový pracovný tok ľahší a plynulejší.

Nevýhodou aplikácie Sketch je, že je k dispozícii iba pre počítače Mac, a neplánuje sa podpora ďalších operačných systémov. To bol problém, pretože dizajnéri budú často chcieť zdieľať súbory .sketch s vývojármi pomocou systému Windows. Našťastie teraz existuje aplikácia „Skica pre Windows“ Šialenstvo ktorý otvorí a upraví súbory .sketch a odstráni väčšinu tejto bolesti - prečítajte si o nich v priečinku Export a konverzia časti tohto článku.

Nenechajte si ujsť naše najlepšie tipy na používanie aplikácie Sketch .

03. Adobe XD

Adobe XD má ľahké rozhranie, ktoré umožňuje ľahké prototypovanie

Adobe XD má ľahké rozhranie, ktoré umožňuje ľahké prototypovanie(Obrázkový kredit: Adobe)

Adobe XD ponúka najlepšie prostredie pre digitálne projekty v rámci balíka Adobe Creative Cloud. Ak ste horlivým používateľom spoločnosti Adobe a ste v spoločnosti XD nováčikom, nemusí sa vám zdať, že by rozhranie pre začiatok vyzeralo veľmi „Adobe“. Stojí však na ďalších popredných nástrojoch. Je to na skok, ak už nejaký čas navrhujete aj vo Photoshope, ale za dizajn UI to stojí za to.

Tento vektorový nástroj na návrh a vytváranie drôtových rámcov sa neustále vylepšuje a obsahuje doplnky ako podpora pre hlasové prototypovanie zabezpečenie toho, aby nástroj mohol držať krok s najnovšími trendmi v UX. XD obsahuje nástroje na kreslenie, nástroje, ktoré umožňujú definovať nestatické interakcie, náhľady mobilných a stolných počítačov a nástroje na zdieľanie, ktoré poskytujú spätnú väzbu k návrhom. Umožňuje vám zvoliť veľkosť artboardu špecifického pre zariadenie na začatie projektu a môžete dokonca importovať populárnu súpravu používateľského rozhrania, napríklad Google Material Design.

Podstatné je, že Adobe XD sa integruje so zvyškom služby Creative Cloud, čo znamená, že budete môcť ľahko importovať a pracovať s prostriedkami z Photoshopu alebo Illustratoru. Ak už používate iné aplikácie Adobe, používateľské rozhranie sa bude cítiť príjemne a dobre známe a nemalo by predstavovať príliš veľa krivky učenia.

Andrej Robu , riaditeľ dizajnu v Robu Studio v Barcelone, je medzi jeho fanúšikmi. „Pre rýchle modely je to skvelé,“ hovorí. „Je to veľmi ľahké rozhranie s množstvom načítaných fotografií a skvelé pre náladové panely. Prototypovanie je veľmi užitočné na to, aby sme klientom ukázali, ako veci fungujú, najmä preto, že môžete ihneď poslať obsah online. “

Ellis Rogers, grafický dizajnér v Receptional Ltd. tiež odporúča. „Keď je návrh / prototyp alebo drôtový model hotový, program Adobe XD vám umožňuje veľmi rýchlo vybrať prvky a vytvoriť prechody stránok pre funkčný prototyp, ktoré je možné zdieľať prostredníctvom odkazu,“ vysvetľuje. „Tento odkaz tiež umožňuje zhromažďovať spätnú väzbu na stránku a udržiavať ju prehľadnú. Odkaz je možné aktualizovať v rámci aplikácie Adobe XD, takže klient môže vždy vidieť najnovšiu verziu bez obáv z nesprávnych verzií. Je to absolútna radosť z práce. “

04. Zázrak

Čuduj sa

Marvel prichádza s integrovaným nástrojom na testovanie používateľov(Obrázok: © Marvel)

Marvel je ďalší nástroj pre webdizajn, ktorý je vynikajúci na vytváranie rýchlych nápadov, vylepšenie rozhrania, ako má vyzerať, a vytváranie prototypov. Čuduj sa ponúka skutočne elegantný spôsob vytvárania stránok, ktorý vám umožňuje simulovať váš návrh pomocou prototypu. Existuje niekoľko skvelých integrácií na vkladanie návrhov do pracovného toku projektu. Je zaujímavé, že existuje integrovaná funkcia testovania používateľov, ktorá je v prostredí nástrojov pre návrh webových aplikácií stále dosť neobvyklá. Všetko je tiež online, takže nemusíte nič sťahovať.

05. Obrma

nástroje na webový design: Figma screengrab

Figma vám umožňuje navrhovať, prototypovať a získavať spätnú väzbu s ostatnými dizajnérmi v reálnom čase [Obrázok: Figma]

Obr je nástroj na návrh rozhrania, ktorý umožňuje spoluprácu viacerých návrhárov v reálnom čase. To je veľmi efektívne, ak máte v projekte viac zainteresovaných strán, ktoré sa podieľajú na formovaní výsledku. Je k dispozícii v prehliadači alebo v systéme Windows, Mac alebo Linux. K dispozícii sú bezplatné aj platené verzie v závislosti od toho, na čo ich používate.

Tu sú niektoré z jeho vynikajúcich funkcií:

„Figma má podobné USP ako Sketch, s výnimkou cross-platform,“ vysvetľuje frontendový dizajnér Benjamin Read . 'Keď som to použil na vytvorenie niekoľkých ikon, zistil som, že pracovný tok bol neuveriteľne plynulý.' Trvalo mi to dlho, kým som sa učil, a prinieslo mi to ďalšiu výhodu spolupráce: v aplikácii môžete zdieľať grafiku s ostatnými. “

„Snažil som sa pre svoju prácu prejsť na Linux a niekedy používam Windows, takže mi Figma dáva z praktického hľadiska zmysel,“ dodáva.

Spisovateľ a umelecký pracovník na voľnej nohe David Eastwood má tiež dobré veci povedať o Figme. „Bol to tiež skutočne užitočný nástroj, keď sme potrebovali rýchlo zosmiešniť MVT; niekedy malé doplnky k existujúcemu usporiadaniu. Sme radi, že môžete rýchlo vytvárať vzory pre stolné počítače, tablety a mobilné telefóny. “

06. Návrhár afinity

Affinity Designer je rovnako výkonný na zariadeniach iPad ako na stolných počítačoch [Affinity Designer]

Affinity Designer je rovnako výkonný na zariadeniach iPad ako na stolných počítačoch [Affinity Designer](Obrázok: © serif)

„Pätkové Affinity Designer bol niektorými označený ako „zabijak Photoshopu“ a je ľahké pochopiť prečo, “hovorí produktový dizajnér A Edwards . „Existovalo niekoľko funkcií, ktoré sa mi skutočne páčili, vrátane nastaviteľných nedeštruktívnych vrstiev. To v podstate znamená, že môžete upravovať obrázky alebo vektory bez ich poškodenia.

„1 000 000-percentné priblíženie bolo iba blaženosťou; je to obzvlášť užitočné pri práci s vektorovým umením, pretože to môžete skutočne priblížiť. Funkcie vrátenia späť a histórie sú tiež veľmi užitočné: Affinity vám umožňuje vrátiť sa späť o 8 000 krokov! '

„Pokiaľ ide o navrhovanie, používateľské rozhranie sa cíti povedomé. Pri prechode z Photoshopu sa zdá, že každý chce začať odznova, čo môže predstavovať skutočnú výzvu. Affinity urobila to, že oboznámila s rozložením a zároveň všetko sprísnila a skryla rozptýlenie. Ľahko som mohol skočiť priamo dovnútra a nechať sa navrhnúť. “

K dispozícii je aj program Affinity Designer pre iPad . Upozorňujeme, že nejde o zmenšenú verziu mobilnej aplikácie, ktorú by ste mohli čakať: je to rovnaká plná verzia, akú dostávate na pracovnej ploche.

Nenechajte si ujsť našich sprievodcov používaním Osoba v pixeloch , Exportovať osobu a Nástroj pero v dizajne Affinity. Pamätajte tiež na to, že Serif predstavuje alternatívu aj pre Photoshop, Affinity Photo a alternatívu InDesign, Vydavateľ podľa záujmov ; všetci sa spolu pekne hrajú.

Makety a prototypy

07. UXPin

UXPin: nástroje na návrh webu

UXPin vám umožňuje vytvárať prototypy s interaktívnymi stavmi a logikou(Obrázkový kredit: UXPin)

Ďalším nástrojom na návrh webových stránok v našom zozname je UXPin. Táto vyhradená prototypová aplikácia je k dispozícii pre Mac, Windows alebo v prehliadači. S väčšinou ostatných nástrojov na návrh môžete napodobňovať interakcie iba prepojením rôznych prvkov na svojom artboarde, program UXPin sa priblíži ku kódu a umožní vám pracovať s interaktívnymi stavmi, logikou a komponentmi kódu.

K dispozícii sú knižnice integrovaných prvkov pre iOS, Material Design a Bootstrap a stovky ďalších sady ikon zadarmo , aby sme vám pomohli na vašej ceste. Spoločnosť UXPin tiež nedávno predstavila funkcie dostupnosti, aby zabezpečila, že vaše návrhy budú v súlade so štandardmi WCAG, čomu tlieskame.

API Request je najnovší prírastok do možností interakcie UXPin. Táto funkcia vám umožňuje prototypovať aplikáciu, ktorá „hovorí“ s vašimi produktmi priamo z vášho návrhového nástroja - bez potreby kódu. Funguje to tak, že vám umožňuje odosielať požiadavky HTTP na externé rozhranie API.

Svoj prvý prototyp môžete vytvoriť v UXPin zadarmo a ak sa vám to hodí, prejdite na platené mesačné predplatné (členstvo v tíme je k dispozícii). UXPin nedávno vylepšil svoju integráciu so Sketch, takže by mohol byť jeden, ktorý by sa dal zaviesť do vášho pracovného toku, ak ste fanúšikom Sketch, ktorý považuje svoje schopnosti prototypovania za obmedzené.

08. Proto.io

Tento nástroj vám pomáha vytvárať realistické prototypy

Tento nástroj vám pomáha vytvárať realistické prototypy(Obrázkový kredit: Proto.io)

Proto.io je špičková aplikácia, ktorá umožňuje vznik realistických prototypov, ktoré začínajú hrubými nápadmi a končia plnohodnotným dizajnom. Nástroj vám tiež poskytuje celý rad možností pre vaše projekty, vrátane podrobných a vlastných vektorových animácií.

Môžete začať rozvíjaním počiatočných nápadov ručne kresleným štýlom, ich prepracovaním do drôtových modelov a ich dokončením prototypom vysokej kvality. Doplnky Sketch a Photoshop pomáhajú, ak chcete navrhovať pomocou iných nástrojov, ale Proto.io zvláda proces návrhu end-to-end dobre. Ostatné funkcie - napríklad testovanie používateľov - pomôžu overiť vaše návrhy. Toto je riešenie typu „všetko v jednom“, ktoré už používa veľké množstvo dôveryhodných značiek.

Existuje veľa skvelých ukážok, s ktorými sa môžete začať hrať, a skutočne vidíte, ako ľahko by toto komplexné riešenie mohlo nahradiť množstvo nástrojov, ktoré sú v súčasnosti k dispozícii. Pomerne nedávne prírastky, Proto.io nedávno priniesla množstvo nových funkcií - vrátane správcov aktív, príručiek pre vývojárov a možnosti zaznamenať váš prototyp - uviesť tento nástroj do súladu s mnohými lepšími prototypovými nástrojmi.

kreslenie na plochu pre 4

09. Balsamiq

Rozhranie Balsamiq

Balsamiq je vynikajúci na rýchle drôtové zapojenie(Obrázok: © Balsamiq)

Ak hľadáte rýchly a efektívny drôtový prenos, potom to hľadáte Balsamiq je silný návrh. Môžete ľahko vytvoriť štruktúru a usporiadanie svojich projektov. Prvky myšou uľahčujú život a tlačidlá môžete prepojiť s inými stránkami. Pomocou wireframingu môžete rýchlo začať plánovať svoje rozhrania a zdieľať ich so svojím tímom alebo klientmi. Spoločnosť Balsamiq funguje od roku 2008 a je hrdá na svoju nízku vernosť, rýchly a sústredený prístup, ktorý nie je nezmyslom.

10. ProtoPie

Začnite sa s týmto nástrojom hrať s natívnymi senzormi

Začnite sa s týmto nástrojom hrať s natívnymi senzormi(Obrázkový kredit: ProtoPie)

Nástroj na návrh webu Protopic umožňuje vytvárať zložité interakcie a priblížiť sa k ideálnej koncovej funkcii vášho dizajnu. Vynikajúcou funkciou je možno schopnosť ovládať senzory inteligentných zariadení vo vašom prototype, ako sú senzory náklonu, zvuku, kompasu a 3D Touch. V závislosti od vášho projektu je to vynikajúci nástroj pre tých, ktorí chcú zahrnúť funkcie natívnej aplikácie. Je to jednoduché a nie je potrebný žiadny kód.

Nedávno vydaná verzia 4.2 obsahuje dve nové veľmi požadované funkcie: teraz môžete do svojich scén pridať upraviteľné súbory SVG a okamžite po výbere môžete zistiť vzdialenosť medzi dvoma vrstvami.

11. MockFlow

MockFlow

Tento nástroj je vhodný na simulovanie hrubých nápadov(Obrázok: © MockFlow)

MockFlow je sada aplikácií na wireframing a plánovanie webových stránok. Aplikácia WireframePro vám pomôže určiť počiatočný nápad a potom iterovať, kým nebude správny - k dispozícii je sledovač revízií používateľského rozhrania, ktorý vám s tým pomôže. Dodáva sa s tisíckami vopred pripravených komponentov a usporiadaní, ktoré môžete upraviť tak, aby vyhovovali vašim požiadavkám, a k dispozícii je režim ukážky na prezentáciu vašej práce kolegom a klientom.

Po dokončení drôtových modelov vám môže zvyšok balíka pomôcť s ďalšími aspektmi plánovania vášho webu vrátane informačnej architektúry, tvorby sprievodcu štýlmi (ten sa dá vygenerovať automaticky) a práce s procesom odhlásenia.

Ak by ste chceli vidieť nejaké ďalšie možnosti, pozrite si náš súhrn hore drôtené nástroje .

12. Adobe Comp

Adobe Comp je fantastický nástroj na tvorbu webových stránok pre iPad, ktorý pomáha pri vytváraní drôtových modelov, prototypov a koncepcií usporiadania webových stránok. Ak chcete, inteligentný skicár s technológiou Creative Cloud. Má základné šablóny pre množstvo rozložení pre mobil a web, a dokonca aj tlač, ak je to vaša vec, a môžete vytvárať rýchle zástupné symboly kreslením intuitívnych tvarov, ktoré znázorňujú obrázky, text a ďalšie. Comp prevádza hrubé obrysy na priame čiary, kruhy a obdĺžniky.

Prekvapivo spoločnosť Adobe nepovažovala za vhodné zahrnúť priamy export do formátu XD - blázon! - napriek dlhoročná požiadavka ktoré boli predmetom kontroly, čo sa zdá byť navždy. Export do Photoshopu je však zabudovaný (spolu s Illustratorom a InDesignom) a úpravy modelu sa vykonajú v všadeprítomnom editore obrázkov, z ktorého potom môžete exportovať do formátu XD. Aj napriek tomuto nevítanému ďalšiemu kroku na ceste používateľov oddaného spoločnosti Adobe v rámci wireframeru si spoločnosť Comp plne zaslúži zahrnutie do tohto zoznamu vďaka svojim schopnostiam kamkoľvek, ľahkému použitiu a pôsobivému používateľskému rozhraniu.

13. Flinto

Rozhranie Flinto

Navrhnite stavy pred a po a Flinto pre vás zistí rozdiel a animuje vás(Obrázok: © Flinto)

Flinto je nástroj na návrh, ktorý vám umožňuje vytvárať jedinečné interakcie s vašimi návrhmi. Môžete použiť množstvo gest a uľahčiť prechody navrhnutím stavov pred a po. Flinto jednoducho pre vás zistí rozdiely a animuje - super užitočné.

Nezabúdajte, že toto je iba iOS, ale bude vám známe, keď ho začnete používať. Online je dokumentácia, ktorá vám pomôže na vašej ceste, a import z aplikácie Sketch a Figma je tiež jednoduchý.

14. Axure

Rozhranie Axure

Drôtové komplexné rozhrania s dynamickými dátami(Obrázok: © Axure)

Axure bol vždy jedným z najlepších nástrojov pre wireframing na trhu, vynikajúcim pre komplexné projekty, ktoré vyžadujú dynamické dáta. So spoločnosťou Axure sa môžete skutočne sústrediť na simulovanie projektov, ktoré sú jednak technické, jednak vyžadujú štruktúru a dáta.

ako zmeniť rozmery stránky v

Proces odovzdávania informácií spoločnosti Axure zahŕňa vytvorenie dôkladných špecifikácií, ktoré vývojárom pomôžu vytvoriť finálny produkt, ktorý zodpovedá vašim návrhom.

15. Justinmind

Justinmind

Justinmind sa integruje s nástrojmi ako Skica a Photoshop(Obrázkový kredit: JustInMind)

Justinmind pomôže s prototypovaním a integruje sa s ďalšími nástrojmi, ako sú Sketch a Photoshop. Môžete si zvoliť svoje interakcie a gestá, ktoré vám pomôžu zostaviť prototyp. Obsahuje tiež súpravy používateľského rozhrania, takže môžete rýchlo zostaviť obrazovky a je tiež responzívna.

16. Tekutina

Kvapalinové rozhranie

Tekutina je skvelá pre rýchly dizajn používateľského rozhrania(Obrázkový kredit: Tekutina)

Tekutina je jednoduchý a intuitívny nástroj na vytváranie rýchlych prototypov a vypracovanie návrhov. Balíček obsahuje niekoľko pekných hotových aktív, ktoré vám pomôžu pri vývoji rýchlych prototypov. Po inovácii je skutočne ľahké zostaviť vlastné symboly s vlastnými preferovanými prvkami používateľského rozhrania. Tento nástroj ponúka veľmi rýchly dizajn používateľského rozhrania s dostupnými prostriedkami pre prototypy s vysokou aj nízkou vernosťou.

17. Súhra

Interplay pomáha udržiavať všetkých na jednej stránke [Obrázok: Interplay]

Interplay pomáha udržiavať všetkých na jednej stránke [Obrázok: Interplay](Obrazový kredit: Interplay)

Súhra je prototypový systém, ktorý zlepšuje komunikáciu a spoluprácu vo vašom tíme, najmä medzi dizajnérmi a vývojármi. Je zostavený s ohľadom na návrhové systémy a je integrovaný s vašim kódom na generovanie ľahko sledovateľnej dokumentácie a automatickej aktualizácie. Udržiavanie všetkých na tej istej stránke a aktuálnosti je hlavnou funkciou - takže keď sa aktualizuje váš kód, tak to platí aj pre váš dizajn. Interplay je stále v beta verzii, ale už pracuje s množstvom veľkých nástrojov na dizajn a vývoj.

Dizajnové rámce a knižnice

18. Bootstrap

nástroje pre webdizajn: Bootstrap screengrab

Starý obľúbený Bootstrap má niekoľko nových výkonných aktualizácií

Bootstrap určite nie je novým nástrojom, ale priniesol revolúciu vo vývoji a naďalej formuje spôsob, akým staviame veci na webe.

V čase písania tohto článku predstavila najnovšia verzia (4.4.1, uvedená v novembri 2019) nové responzívne kontajnery, ktoré sú tekuté až do určitého bodu prerušenia, a nové triedy citlivých .row-cols na efektívne určenie počtu stĺpcov medzi bodmi prerušenia.

Bootstrap tiež nedávno uviedol na trh svoju vlastnú knižnicu ikon s otvoreným zdrojom, Ikony bootstrapu , ktorý je navrhnutý na prácu s komponentmi Bootstrap.

Nájsť najlepšie bezplatné témy Bootstrap v našom sprievodcovi .

19. Uvedenie do prevádzky 3

Vytvorte web Bootstrap bez nutnosti písania kódu [Obrázok: Designmodo]

Vytvorte web Bootstrap bez nutnosti písania kódu [Obrázok: Designmodo](Obrazový kredit: Designmodo)

Ak máte radi Bootstrap, ale nechcete sa ponoriť do surovej veci, Startup 3 je ľahká cesta; je to online aplikácia so vstavanými šablónami a témami na vytváranie webových stránok na základe Bootstrap 4 s mriežkou s 12 stĺpcami. Svoj web môžete vytvoriť bez písania kódu pomocou rozhrania drag-and-drop, ale na dokončenie budete potrebovať určité znalosti HTML a CSS.

20. Vue.js

nástroje pre návrh webu: vue.js screengrab

Nepoužívate na zložité knižnice JavaScriptu? Vue.js je ideálny pre vás [Obrázok: Vue.js]

Vue.js je rámec pre vytváranie používateľských rozhraní a používa virtuálny DOM. Ako už názov napovedá, základná knižnica Vue sa zameriava na vrstvu zobrazenia.

Pozrite sa na príklad kódu prevzatý z dokumentov Vue, ktorý využíva vstupy používateľov a demonštruje eleganciu knižnice. Začneme HTML:

{{ message }}

Reverse Message

Všimnite si vlastný obslužný program v-on, ktorý volá reverseMessage metóda. Tu je JavaScript:

var myApp = new Vue({ el: '#example', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split(''). reverse().join('') } } });

Tento príklad naplnil odsek údajmi a definuje reverseMessage metóda. Program Vue je vhodný pre tých, ktorí majú menej skúseností s komplexnými knižnicami, ale má tiež množstvo doplnkov, ktoré pomáhajú pri vývoji komplexných jednostránkových webových aplikácií.

21. Vzorové laboratórium

nástroje pre webdizajn: Screen Labrab pre Pattern Lab

Laboratórium Pattern Lab je založené na atómovom dizajne [Obrázok: Pattern Lab]

Pattern Lab je nádherný dizajnérsky nástroj založený na vzoroch, ktorý vytvorili Dave OIsen a Brad Frost. Je to založené na koncepcii Atómový dizajn , ktorý hovorí, že by ste mali rozdeliť svoj návrh na jeho najmenšie časti - atómy - a skombinovať ich do väčších, opakovane použiteľných komponentov - molekúl a organizmov - z ktorých potom možno urobiť použiteľné šablóny.

Aj keď je to jadro statického generátora stránok, ktorý spája komponenty používateľského rozhrania, je toho oveľa viac Laboratórium vzorov ako tamto. Je to jazykovo a nástrojovo agnostické; umožňuje vám vnoriť vzory používateľského rozhrania do seba a navrhovať ich pomocou dynamických údajov; obsahuje nástroje na zmenu veľkosti výrezu pre agnostické zariadenie, ktoré vám pomôžu zabezpečiť, aby váš návrhový systém plne reagoval; a je úplne rozšíriteľný, takže si môžete byť istí, že sa rozšíri tak, aby vyhovoval vašim potrebám.

22. Materiálové prevedenie

Material Design je súbor zásad od spoločnosti Google [Obrázok: Google]

Material Design je súbor zásad od spoločnosti Google [Obrázok: Google](Obrázkový kredit: Google)

Materiálové prevedenie je vizuálny jazyk spoločnosti Google, ktorého cieľom je spojiť klasické princípy dobrého dizajnu s inováciami v oblasti technológií a vedy a vytvoriť tak jednotný a flexibilný základ vášho webu.

Webové stránky a aplikácie vytvorené pomocou rámca Material Design budú vyzerať moderne a budú používateľovi dobre známe, takže pre ľudí bude okamžité jednoduché použitie vášho produktu. Existuje veľa nástrojov, ktoré vám pomôžu s týmto dizajnovým systémom; kliknutím na Zdroje na navigačnej lište ich nájdete.

Generovať banner JS

(Obrázok: © Future / Toa Heftiba, Unsplash)

Pripojte sa k nám v apríli 2020 s našou zostavou superhviezd JavaScriptu na GenerateJS - konferencii, ktorá vám pomôže vytvoriť lepší JavaScript. Rezervovať teraz na generateconf.com

Ďalšia stránka: Špecializované nástroje pre webový design na riešenie akýchkoľvek problémov

  • 1
  • dva

Aktuálna stránka: Strana 1

Ďalšia strana Strana 2