-
Certificates: Web designer" certificate
-
Additional Certificates: Certificate "Web design with HTML, CSS and Visual Studio Code"
Certificate "Graphic Design with Adobe CC"
JavaScript" certificate
Certificate "UI/UX Design" -
Examination: Praxisbezogene Projektarbeiten mit Abschlusspräsentationen
-
Teaching Times: Full-timeMonday to Friday from 8:30 a.m. to 3:35 p.m. (in weeks with public holidays from 8:30 a.m. to 5:10 p.m.)
-
Language of Instruction: German
-
Duration: 20 Weeks
Web design (HTML/CSS/Visual Studio code)
HTML and CSS (approx. 6 days)
HTML introduction
Basic framework
Tags for text creation (h1-h6, p, br, span)
Text format commands
Integrating graphics
Links (internal, external, phone, mailto link)
Favicons
Lists and tables
Correct syntax structure
Checking with W3C validation tool
CSS introduction
Integration options for CSS specifications (internal, external, inline style)
Basic commands (text design, font color, background color)
HTML containers
Use and styling of containers
Integration of YouTube and Google Maps
Video and audio player
Object-fit
VS Code (approx. 1 day)
Introduction to VS Code
Additional extensions for VS Code. (e.g. Live Server, Emmet Commands, Copilot (AI))
AI usage in combination with VS Code
Layout techniques (approx. 4 days)
Classes, IDs, selectors
Introduction box model
Padding, margin, border, border-radius and their shorthands
Flex-Box introduction
Layouts with flex box
Alignment with Flexbox
Introduction to Grid System
Layouts with Grid
Alignment with Grid System
Floating text around images with float and clear
General display properties of tags
Background images
Status and values (approx. 1 day)
Introduction of pseudo-classes (hover, active, focus, nth-child, first-child, last-child)
Pseudo elements (::before, ::after, content)
Specificity (value of codes)
Positioning (approx. 2 days)
Introduction to positions
Static, absolute, fixed, sticky, relative
Left, right, top, bottom, z-index
Dropdown menus
:target
:target in combination with navigation menus and modals
Forms (approx. 2 days)
Introduction to forms
Fieldset, legend
Inputs, textareas, labels, values, name, selects
Autocomplete
Form design with CSS
Integration of php-script in action with AI
Effects and fonts with CSS (approx. 1 day)
CSS transition effects
Transition, filter, transform
Color gradients, box-shadow, text-shadow
Font integration with @font-face
Responsive web design (approx. 2 days)
Introduction to responsive design
Media queries, breakpoints
Landscape, portait mode
Responsive images with picture and srcsets
Image editing, compression of images
Generating images with AI
Search engine optimization (approx. 1 day)
Introduction to SEO
On-page optimization and use of AI-generated texts
Performance optimization to improve SEO and presentation of suitable tools
CSS techniques and interaction (approx. 2 days)
CSS variables
Dark mode
Calculation with CSS
Introduction to CSS animations
Duration, delay, direction, timing-function, iteration-count, fill-mode
Animated burger button
One-pager and multilingualism (approx. 2 days)
Introduction One-Pager
Smooth-scroll
Integration of fontawesome library
Dealing with SVG graphics
Layer integration and CSS customization
Multilingual websites
Extensions and frameworks (approx. 1 day)
Introduction to Bootstrap
Use of Bootstrap components
Responsive design with Bootstrap
JavaScript (approx. 3 days)
Introduction to JavaScript
JavaScript/jQuery methods
Create jQuery Lightbox
Variables
If-else statements
Scroll, window, resize
arrays
For-loop
Math object
Legal requirements and project management (approx. 2 days)
Internet law
Copyrights in relation to AI/KI
Accessibility
Project management
Project work (approx. 10 days)
To consolidate the content learned
Presentation of the project results
Graphic design with Adobe CC
Introduction to the Adobe Creative Cloud (approx. 2 days)
Desktop programs at a glance: Photoshop, Illustrator, InDesign
Adobe mobile apps for graphic design
Creative Cloud libraries
Color trends and inspirations (e.g. Adobe Stock, Adobe Color)
Adobe Bridge, Adobe Exchange
Basics (approx. 1 day)
Art vs. design
Design disciplines, design principles
Design process
Design laws of perception
Eye movement and arrangement
Figure-ground relationship
Optical illusions and phenomena
Interference effects, Hick's law
Perspective and spatial effect
Shape and color (approx. 2 days)
Point, line and surface
Arrangement, weighting, format, proportions and aspect ratios
Color theory, color systems, color design (harmonies, contrasts)
Properties, effect and meaning
Attention through form and color
Creating and editing shapes (signs, pictograms, icons)
Artificial intelligence (AI) in the work process
Presentation of specific AI technologies
and possible applications in the professional environment
Images (approx. 3 days)
Image competence and image quality
Pixel and vector graphics
Research, idea, mood board, eye-catcher and storytelling
The human being as a motif
Images in corporate communication
Image design and image editing
Typography and layout (approx. 5 days)
Anatomy of letters
Font history, font classification, font blending
Reading typography, detailed typography
Workflow: layout, basic rules of good layouts
Type area and design grid
Dramaturgy, visual direction and focus
Implementing and presenting layout ideas
Overview of file output (print, digital)
Corporate Design (approx. 2 days)
Corporate design vs. corporate identity
Basic building blocks
Logo design, signets and brands
Implementation - word-image-brand
The corporate design manual (style guide)
Project work (approx. 5 days)
To consolidate the content learned
Presentation of the project results
JavaScript
JavaScript Basics (approx. 7 days)
Introduction to JavaScript, history, areas of application
ECMA script versions
Integration of JavaScript in HTML
IDE: Installation and introduction to WebStorm
Language elements: variables, constants, typing
Primitive data types: Number, String, Boolean
Collection data types: Arrays, objects
Copy by reference vs. copy by value
Arithmetic and logical operators
Control structures: conditions, loops, functions
Scope, global scope, block scope
Error handling
Local storage: cookies, web storage
JSON
ES6 import/export
Version control with Git, introduction to GitHub
DOM manipulation with JavaScript (approx. 5 days)
Selecting HTML
Content, attributes and styling
Events, event object, bubbling
Intersection observer and mutation observer
Creating, copying, moving and deleting DOM elements
Frameworks/Libraries (approx. 1 day)
Create your own library
AI (approx. 1 day)
Presentation of specific AI technologies in the professional environment
Artificial intelligence (AI) in the work process
Integration of AI in the IDE
Use of AI for code completion, refactoring and learning support
Project work (approx. 6 days)
To consolidate the content learned
Presentation of the project results
UI/UX design
General introduction (approx. 1 day)
UX, Usability, UI, Mental Model Guideline, Human factors Guideline
Principles of user-centered design
ISO 9241-210/HCD
Accessibility: Basic terms, legal requirements (BITV, EU directives), significance for UX design
Process for designing usable interactive systems
Types of AI tools in the UI/UX context (text, image, analysis)
HCD: Analysis - context of use (approx. 2 days)
Personae and empathy map
Customer journey
Overview of web analytics/questionnaire
HCD: Specifying the usage requirement (approx. 1 day)
Scenarios, user stories
Task model, task flows
Context interviews and observation
Diary studies
HCD: Creating design solutions to meet usage requirements (approx. 1 day)
Guidelines and standards: 7 dialog principles of ISO 9241-110
10 principles of user interface design according to Jakob Nielsen
Visual perception, regularities
HCD design solutions: Taxonomy, information architecture and navigation concepts (approx. 3 days)
Flow Chart
User Flow
Information Architecture
Micro information architecture
Conversion strategy
Navigation concepts and sitemap
Card sorting: planning, preparation, implementation and evaluation
Mobile navigation patterns (bootom navigation, hamburger menus, tabs)
Overview of agile project management (approx. 1 day)
Waterfall model vs. agile methods
Insight into agile management according to the Scrum method
Epic, user story and task
Design sprint method
HCD design solutions: User Interface Design (approx. 2 days)
Styleguide, UI KITs, Pattern Library and Design System
UI components/elements and forms
Colors, font and typography in the UI, icons
Accessibility: color contrasts and legible fonts, control elements (size, spacing, focus)
Automated testing of contrasts, legibility and alternative texts
Brief overview of the semantic structure (HTML/ARIA)
Atomic design
Mobile first design
HCD design solutions: Design techniques with Figma (approx. 3 days)
Structure and basics: pages and frames, layout grids, constraints
Components and variants (buttons, libraries, design systems)
Responsive design (frames, auto layout)
Scribbles, wireframes, mockups
Prototyping: interactions, transitions, overlays, prototype sharing
Use of AI functions in Figma and supplementary tools for the rapid creation and variation of designs
Usability testing and evaluation (approx. 2 days)
Overview of usability testing methods
Thinking Aloud: planning, preparation, implementation and evaluation
Questionnaires (UEQ, AttrakDiff, VisAWI)
A/B testing
Accessibility: tests with keyboard and screen reader
Use of aids and tools
Project work (approx. 4 days)
To consolidate the content learned
Presentation of the project results
Changes are possible. The course content is updated regularly.
Once you have completed the course, you will be familiar with the complete workflow for modern web design and will be able to produce user-friendly and sophisticated websites: You will be familiar with the design basics, the most important skills in HTML, CSS and Dreamweaver, the use of JavaScript and Ajax, as well as the creation of appealing user interfaces.
Web designers, web programmers, graphic designers, media designers, specialists from artistic professions or people who are responsible for the conception, design and practical implementation of websites and want to acquire the necessary knowledge and skills.
Nowadays, almost all companies rely on an attractive Internet presence to represent them as a company. The main potential employers are graphic design, advertising, web, multimedia or full-service agencies, as well as software and database providers. Web design skills are required in almost all sectors. With the appropriate know-how, self-employment is also an interesting prospect.
Your meaningful certificate provides a detailed insight into the qualifications you have acquired and improves your career prospects.
Didactic concept
Your lecturers are highly qualified both professionally and didactically and will teach you from the first to the last day (no self-study system).
You will learn in effective small groups. The courses usually consist of 6 to 25 participants. The general lessons are supplemented by numerous practical exercises in all course modules. The practice phase is an important part of the course, as it is during this time that you process what you have just learned and gain confidence and routine in its application. The final section of the course involves a project, a case study or a final exam.
Virtual classroom alfaview®
Lessons take place using modern alfaview® video technology - either from the comfort of your own home or at our premises at Bildungszentrum. The entire course can see each other face-to-face via alfaview®, communicate with each other in lip-sync voice quality and work on joint projects. Of course, you can also see and talk to your connected trainers live at any time and you will be taught by your lecturers in real time for the entire duration of the course. The lessons are not e-learning, but real live face-to-face lessons via video technology.
The courses at alfatraining are funded by Agentur für Arbeit and are certified in accordance with the AZAV approval regulation. When submitting a Bildungsgutscheinor Aktivierungs- und Vermittlungsgutschein, the entire course costs are usually covered by your funding body.
Funding is also possible via Europäischen Sozialfonds (ESF), Deutsche Rentenversicherung (DRV) or regional funding programs. As a regular soldier, you have the option of attending further training courses via Berufsförderungsdienst (BFD). Companies can also have their employees qualified via funding from Agentur für Arbeit (Qualifizierungschancengesetz).