Webdesigner:in
Kurs-ID | 9998-2024-04-29 |
Datum | 29.04.2024 bis 13.09.2024 |
Dauer | 20 Woche(n) |
Unterrichtszeiten | Montag bis Freitag von 08:30 bis 15:35 Uhr (in Wochen mit Feiertagen von 8:30 bis 17:10 Uhr) |
Kosten | k. A. |
Zielgruppe | Webdesigner:innen, Webprogrammierer:innen, Grafiker:innen, Mediengestalter:innen, Fachkräfte aus künstlerischen Berufen oder Personen, die bei der Konzipierung, Gestaltung und praktischen Umsetzung von Internet-Auftritten verantwortlich mitwirken und die dafür notwendigen Kenntnisse und Fähigkeiten erwerben wollen. |
Abschluss | Zertifikat „Webdesigner:in“, Zertifikat „Webdesign mit HTML/CSS/Dreamweaver“, Zertifikat „Grafikdesign mit Adobe CC“, Zertifikat „Grundlagen JavaScript/Ajax“, Zertifikat „UI/UX-Design“ |
Förderung | Bildungsgutschein (Arbeitsuchende und Arbeitslose), Weiterbildungsförderung für Beschäftigte, Europäischer Sozialfonds ESF (Kurzarbeit oder Transfergesellschaften). Weitere Förderstellen: Berufsförderungsdienst (BFD), die Berufsgenossenschaft (BG) sowie der Rentenversicherungsträger (DRV). |
Präsenzkurs | Keine Angabe. |
mind. Teilnehmerzahl | 6 |
max. Teilnehmerzahl | 25 |
URL des Kurses | Details beim Anbieter |
Anmelde URL des Kurses | Direkte Anmeldung beim Anbieter |
spezielles Angebot für Dozenten | Keine Angabe. |
Veranstaltungsort
|
alfatraining Bildungszentrum GmbH
Friedrichstraße 13 70174 Stuttgart |
Abendkurs | Bildungsgutschein | Förderfähig nach Fachkursprogramm des ESF | Barierrefreier Zugang |
---|---|---|---|
Nein | Ja | k. A. | k. A. |
Beschreibung |
---|
Die professionelle Konzeption und Umsetzung ansprechender Webseiten sind die Kernthemen dieses Kurses. Daher beinhaltet der Kurs u. a. HTML, CSS, JavaScript und Ajax sowie die Themen Grafikdesign und UI/UX. Zudem erfährst du, wie Künstliche Intelligenz (KI) in deinem Beruf eingesetzt wird. Webdesign mit HTML, CSS und Dreamweaver HTML (ca. 5 Tage) Grundgerüst Tags zur Texterstellung (h1-h6, p, br) Grundlagen CSS Text-Format-Befehle Gerüstbildende HTML-Tags (z. B. header, nav) Grafiken einbinden und in Photoshop aufbereiten Favicons Verlinkungen Interne-, Externe-, Tel.-, mailto-Links Listen und Tabellen Formulare in HTML Formularelemente Einbindung von Video- und Audioelementen Einbindung von YouTube und Google-Maps Unterschiede zwischen XHTML und HTML Künstliche Intelligenz (KI) im Arbeitsprozess Vorstellung von konkreten KI-Technologien im beruflichen Umfeld Anwendungsmöglichkeiten und Praxis-Übungen Grundlagen CSS (ca. 5 Tage) Grundlagen Dreamweaver Einbindungsmöglichkeiten von CSS-Angaben (intern, extern, inline-Style) Textgestaltung mit CSS CSS-Attribute zur Gestaltung von Bordern und Abständen (padding, margin) Hintergrundgestaltung per CSS Grundlagen float/clear Spaltigkeit mit float Farben mit CSS Clearfix Pseudoelemente (::before/::after) Pseudoklassen (:nth-of-type) Listen/display/Link-Pseudo-Klassen Navigation mit ul/li (horizontal/vertikal) CSS-Flexbox (ca. 5 Tage) Spaltigkeit mit Flex Ausrichtung von Elementen mit Flex Spalten in Spalten mit Flex Individuelle Schrift verwenden (@font-face) Schriften mit Dreamweaver Dreamweaver – CSS-Designer CSS-Position Positionen: relative/absolute/fixed Möglichkeiten zur Formulargestaltung per CSS CSS-Farbverläufe CSS – transition/transform Responsives Webdesign (ca. 6 Tage) Breakpoints, Viewport, Media-Querys Header und header-img responsiv gestalten Picture-Elemente in HTML Mobile Navigation mit hover Hover in click auf Apple-Handys ermöglichen Klick-Event per CSS (mittels checkbox) Responsive Navigationen mit click Animierter Burger-Button CSS-Akordeon (mittels Radio-Buttons) Drop-Down-Menü für Desktop und Mobile Unterschiedliche Designs CSS-Pseudoklasse :target One-Page-Site – Seitenstruktur Responsive Navigation mit :target-Steuerung Vorteile von One-Page-Sites JavaScript (ca. 9 Tage) Anwendungen einbinden Einstieg in JavaScript/jQuery If-then-else Variablen Data Objekt Array Datentyp ScrollTop For-Schleife Math-Objekt Sticky-menu (js/css) Menu mit Scrollen ein-/ausblenden Verwendung von vh/vw und calc Pflichtangaben Impressum/Datenschutz Cookiehinweis Font-awesome – Symbol Bibliothek CSS-Filter CSS-Variablen Optim. der Site für die Suchmaschinen (SEO) Object fit – Rahmenfüllende Grafiken CSS-Animation CSS-Grid Grid-template-areas Einführung in CSS-Framework: Bootstrap Projektarbeit (ca. 10 Tage) Zur Vertiefung der gelernten Inhalte Präsentation der Projektergebnisse Grafikdesign mit Adobe CC – Medienübergreifendes Arbeiten Digital/Print/Web Einführung in die Adobe Creative Cloud (ca. 2 Tage) Desktop Programme im Überblick: Photoshop, Illustrator, InDesign Adobe Mobile Apps für Grafikdesign Creative Cloud Bibliotheken Farbtrends und Inspirationen (z. B. Adobe Stock, Adobe Color) Adobe Bridge, Adobe Exchange Grundlagen (ca. 1 Tag) Kunst vs. Design Designdisziplinen, Designprinzipien Designprozess Gestaltgesetze der Wahrnehmung Blickverlauf und Anordnung Figur-Grund-Beziehung Optische Täuschungen und Phänomene Interferenzeffekte, Hicks Gesetz Perspektive und räumliche Wirkung Form und Farbe (ca. 2 Tage) Punkt, Linie und Fläche Anordnung und Gewichtung Format, Proportionen und Seitenverhältnisse Farbenlehre und Farbsysteme Eigenschaften, Wirkung und Bedeutung Farbgestaltung (Harmonien, Kontraste) Aufmerksamkeit durch Form und Farbe Erstellung und Bearbeitung von Formen (Zeichen, Piktogramme, Icons) Künstliche Intelligenz (KI) im Arbeitsprozess Vorstellung von konkreten KI‐Technologien im beruflichen Umfeld Anwendungsmöglichkeiten und Praxis‐Übungen Bilder (ca. 3 Tage) Bildkompetenz und Bildqualität Pixel- und Vektorgrafik Recherche, Idee, Moodboard Eyecatcher und Storytelling Der Mensch als Motiv Bilder in der Unternehmenskommunikation Bildgestaltung und Bildbearbeitung Typografie und Layout (ca. 5 Tage) Anatomie der Buchstaben Schriftgeschichte, Schriftklassifikation Schriftmischung Lesetypografie, Detailtypografie Workflow: Layout Grundregeln guter Layouts Satzspiegel und Gestaltungsraster Dramaturgie, Blickführung und Fokus Layoutideen umsetzen, präsentieren Dateiausgabe im Überblick (Print, Digital) Corporate Design (ca. 2 Tage) Corporate Design vs. Corporate Identity Basisbausteine Logodesign, Signets und Marken Umsetzung – Wort-Bild-Marke Das Corporate – Design-Manual (Styleguide) Projektarbeit (ca. 5 Tage) Zur Vertiefung der gelernten Inhalte Präsentation der Projektergebnisse Grundlagen Javascript/Ajax JavaScript Grundlagen (ca. 7 Tage) Einführung Einbinden in HTML-Seiten Sprachelemente Variablen, Konstanten und Datentypen Operatoren Kontrollstrukturen Bedingte Anweisungen Schleifen Funktionen Arrays Objekte Cookies Webstorage Fehlerbehandlungen Künstliche Intelligenz (KI) im Arbeitsprozess Vorstellung von konkreten KI-Technologien im beruflichen Umfeld Anwendungsmöglichkeiten und Praxis-Übungen DOM-Manipulation mit JavaScript (ca. 3 Tage) Grundlagen HTML-Selektieren Inhalt und Attribute Styling Events DOM-Elemente anlegen DOM-Elemente kopieren, verschieben, löschen AJAX (ca. 3 Tage) Einführung Funktionsweise Voraussetzungen http-Anfragen XMLHttpRequest-Objekt Synchrone und asynchrone Requests Web Services/Übertragungen: - JSON - XML/XML-Response Frameworks/Libraries (ca. 2 Tage) Eigene Bibliothek erstellen jQuery Vor- und Nachteile Projektarbeit (ca. 5 Tage) Zur Vertiefung der gelernten Inhalte Präsentation der Projektergebnisse UI/UX-Design Allgemeine Einführung in die Thematik (ca. 1 Tag) UX, Usability, UI, Mental model, Human factors Prinzipien der nutzerzentrierten Gestaltung ISO 9241-210/HCD Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme HCD: Analyse - verstehen und festlegen des Nutzungskontextes (ca. 3 Tage) Personae Empathy Map Customer Journey Web Analytics Fokusgruppen Fragebogens HCD: Spezifizieren der Nutzungsanforderung (ca. 1 Tag) Szenariomodell Aufgabenmodell Kontextinterviews Tagebuchstudien Teilnehmende Beobachtung HCD: Erzeugen von Gestaltungslösungen um Nutzungsanforderung zu erfüllen (ca. 1 Tag) Richtlinien und Normen: 7 Dialogprinzipien der ISO 9241-110 10 Prinzipien des User Interface Designs nach Jakob Nielsen Visuelle Wahrnehmung, Gesetzmäßigkeiten HCD-Gestaltungslösungen: Taxonomie Informationsarchitektur & Navigationskonzepte (ca. 3 Tage) Flow Chart User Flow Informationsarchitektur Micro Informationsarchitektur Conversion-Strategie Navigationskonzepte Sitemap Card Sorting: Planung, Vorbereitung, Durchführung und Auswertung Überblick agiles Projektmanagement (ca. 1 Tag) Wasserfall-Modell vs Agile Einblick in agiles Management nach der Scrum-Methode Epic, User Story und Task Design Sprint Methode HCD-Gestaltungslösungen: User Interface Design (ca. 1 Tag) Styleguide, UI KITs, Pattern Library & Design System UI Komponenten/ Elemente & Formular Farben, Schrift und Typografie im UI, Icons Atomic Design Mobile first Design HCD-Gestaltungslösungen: Entwurfstechniken mit Figma & XD Adobe (ca. 2 Tage) Figma vs Adobe XD Figma Die Werkzeugpalette von Figma Workflow UI-Komponenten Responsive Design Scribbles, Wireframe Interaktive Prototypen Adobe XD Die Werkzeugpalette von XD Workflow UI-Komponenten Responsive Design Scribbles, Wireframe Interaktive Prototypen HCD-Evaluierung des Designs gegen die Nutzungsanforderungen – Usability testing (ca. 2 Tage) Ein Überblick über Usability-Testmethoden Thinking Aloud: Planung, Vorbereitung, Durchführung und Auswertung (UEQ) User Experience QuestionnaireAttrakDiff VisAWI – Visual Aesthetics of Websites Inventory A/B-Testing Künstliche Intelligenz (KI) im Arbeitsprozess Vorstellung von konkreten KI-Technologien im beruflichen Umfeld Anwendungsmöglichkeiten und Praxis-Übungen Projektarbeit (ca. 5 Tage) Zur Vertiefung der gelernten Inhalte Präsentation der Projektergebnisse Änderungen möglich. Die Lehrgangsinhalte werden regelmäßig aktualisiert. |
Schlagworte |
---|
html, layout, adobe, xhtml, gestaltung, webdesign, medien, webprogrammierung, typografie , grafikdesign |
Gelistet in folgenden Rubriken: |
---|