UI-kits maken met Sketch
Een cursus van Nodos .UX / UI-ontwerper
Een cursus van Nodos ., UX / UI-ontwerper
Leer vooraf ontworpen bestanden maken met behulp van de Atomic Design-methodologie voor website- en app-interfaces die je workflow stroomlijnen
De hoofdregel van applicaties is om het leven van de gebruikers gemakkelijker te maken, maar het kan een heel ingewikkeld proces zijn om er een helemaal opnieuw te maken. Daarom zijn UI Kits, kant-en-klare sets met elementen voor interface-ontwerp, een zeer nuttige hulpbron.
In deze cursus leer je hoe je UI Kits voor apps en websites maakt in Sketch van designer Migue, oftewel El Nodos. Bovendien zult u zien hoe u ze kunt bijwerken om ze in toekomstige projecten opnieuw te gebruiken en uw workflow nog meer te stroomlijnen. Breng verbluffende interfaces tot leven en creëer snel en gemakkelijk onvergetelijke ervaringen.
Wat leer je tijdens deze online cursus?
17 lessen & 21 aanvullende bronnen
Wat gaan we doen tijdens de cursus?
2 minuten, 25 seconden
Wat is een UI-kit?
7 minuten, 52 seconden
UI-patronen en componenten in Sketch
4 minuten, 57 seconden
Atoom ontwerp
11 minuten, 18 seconden
Het project
10 minuten, 16 seconden
Kleuren, lettertype en raster
20 minuten, 13 seconden
Wat is inbegrepen in deze cursus?
Je begint met het leren kennen van je leraar en hoe hun pad door hun professionele carrière is geweest. Het zal ook het project uitleggen waaraan u tijdens de cursus zult werken.
Vervolgens ontdek je wat een UI Kit is en wat het onderscheidt van een ontwerpsysteem. U zult de interface-ontwerppatronen zien en u leert uw bestanden te ordenen volgens de methodologie die Migue gebruikt.
Je beoordeelt het project waarop je je UI Kit gaat maken en je analyseert de te maken componenten. Vervolgens definieert u uw stijlgids door te kijken naar de kleuren, het lettertype, de rasters (raster) en de pictogrammenset.
Je onderneemt actie door eerst de atomen te maken, dan combineer je er enkele om de moleculen te maken en tenslotte maak je een aantal schermen met al deze componenten.
In het laatste deel leert Migue u hoe u uw UI Kit in Sketch als een bibliotheek kunt gebruiken en hoe u deze up-to-date kunt houden, door zo nodig nieuwe componenten toe te voegen.
Aanbevolen software en tools voor deze cursus
Wat is het cursusproject?
U maakt een UI Kit waarmee u uw werk kunt stroomlijnen bij het maken van schermen voor uw toepassing. Tijdens de cursus werken ze vanuit een muziek-app.
Voor wie is deze online cursus bedoeld?
Aan ontwerpers die de wereld van interface design willen betreden, UI designers, junior interaction designers en al diegenen die geïnteresseerd zijn in applicatie design of die betrokken zijn bij het ontwerpen van digitale producten.
Vereisten en materialen
Basiskennis van Sketch is vereist om deze cursus te volgen.
Wat betreft materialen, je hebt een computer met macOS Mojave of hoger nodig en de nieuwste versie van Sketch geïnstalleerd (je kunt de proefversie downloaden op de website). Het hebben van een Wacom is een pluspunt, maar niet essentieel.
Beoordelingen
- 1 jaar geleden
El curso es una base para iniciar a trabajar con la metodología Atomic Design.
- 3 jaar geleden
La neta no era lo que esperaba, pensé que el UI Kits te ayudaba a crear el diseño de la aplicación, pero ya lo tenia creado y solo agrupo los componentes, y también no me gusto el estilo en como hablaba, parecía que le faltaba el aire para pronunciar palabras, disculpen mi critica pero así lo percibí
- 4 jaar geleden
Increible curso
- 4 jaar geleden
Muy completo
- 5 jaar geleden
El curso me ha parecido super claro y completo. El profesor da muchos detalles y es super dinamico para todo lo que explica en tan poco tiempo. Super recomendable.
Momenteel richt hij zich op het creëren van schaalbare ontwerpsystemen en patronen. Daarnaast is hij mede-oprichter van de SketchMX-community, waar ze regelmatig bijeenkomsten organiseren voor de productdesign-community, waaraan ontwerpers, ontwikkelaars, ux-schrijvers, productontwerpers en iedereen die geïnteresseerd is in digitaal productontwerp deelnemen.
Inhoud
- U1
Introductie
- Presentatie
- invloeden
- Wat gaan we doen tijdens de cursus?
- U2
Concepten en instellingen schetsen
- Wat is een UI-kit?
- UI-patronen en componenten in Sketch
- Atoom ontwerp
- U3
De basis leggen voor onze UI Kit met Sketch
- Het project
- Kleuren, lettertype en raster
- Kleuren, lettertype en raster 2
- Pictogrammenset
- U4
Atomaire componenten maken in Sketch
- Componenten maken: Atomen
- Componenten maken: Atomen 2
- Componenten maken: moleculen
- Schermen bouwen met atomen en moleculen
- U5
Bibliotheken in Sketch
- UI Kit als bibliotheek in Sketch
- Voeg nieuwe componenten toe aan onze UI Kit
- Presenteer je UI Kit
- EP
Eindproject
- UI-kits maken met Sketch
Wat kan je verwachten van een cursus van Domestika
Leer in je eigen tempo
Geniet van thuis leren, zonder lesroosters en in je eigen tempo. Jij beslist wanneer je verder gaat met het volgende onderdeel.
Leer met de beste professionals
Leer de meest bruikbare methoden en technieken van de beste professionals in de creatieve industrie.
Ontmoet deskundige docenten
Iedere docent brengt kennis met passie over, biedt duidelijke uitleg en een professioneel perspectief bij elke les.
Certificaten
PLUSAls Plus-lid krijg je voor elke cursus een persoonlijk certificaat, ondertekend door je docent. Deel het in je portfolio, op social media of waar je maar wilt.
Zorg dat je op de voorste rij zit
Dankzij de hoge kwaliteit van de video's mis je geen enkel detail. Dankzij de onbeperkte toegang kun je de lessen zo vaak bekijken als nodig is om je vaardigheden te perfectioneren.
Deel kennis en ideeën
Stel vragen, krijg feedback en bied oplossingen aan. Deel je leerervaringen met andere studenten in de community die net als jij een passie hebben voor creativiteit.
Maak contact met een wereldwijde creatieve community
Deze community heeft miljoenen gebruikers van over de hele wereld, nieuwsgierig en enthousiast om hun creativiteit te verkennen en te uiten.
Geef cursussen op een professionele manier
Domestika selecteert zorgvuldig haar docenten en produceert iedere cursus in eigen huis om een uitstekende online leerervaring te garanderen.
Veelgestelde vragen
You’ll learn how to create, organize, and document visual design systems, UI Kits, and reusable components in Sketch, using methodologies like Atomic Design and Material Design patterns for mobile and web apps.
This is an intermediate-level course, so it’s recommended that you have basic knowledge of digital graphic design or prior experience with tools like Sketch or Figma.
You’ll need a Mac with Sketch installed, internet access, and basic design knowledge. Familiarity with digital interfaces and usability concepts is recommended.
Atomic Design is applied by breaking components into atoms, molecules, and organisms, enabling you to build modular, scalable, and easy-to-maintain interfaces in Sketch.
Yes, the course guides you step-by-step to create, organize, and reuse a UI Kit in Sketch, centralizing components, styles, and visual elements for mobile or web apps.
Yes, you’ll learn to create, document, and manage visual design systems, including style guides, color palettes, typography, and components.
Yes, the course shows you how to check color contrast between backgrounds and text, applying accessibility principles to improve readability and user experience.