Visual Designer

The aim of visual design is the user-friendly and visually appealing presentation of digital products such as websites. The course imparts the relevant knowledge in the creation of websites with HTML and CSS, in the implementation of user interfaces and the analysis of the user experience as well as in the editing and processing of digital films and the design with effects. An introduction to the use of artificial intelligence in the workplace rounds off the course.
  • Certificates: Visual Designer" certificate
  • Additional Certificates: Certificate "Web design with HTML, CSS and Visual Studio Code"
    Certificate "UI/UX Design"
    Certificate "Video editing and post-production with Adobe Premiere Pro CC and After Effects CC"
  • Examination: Praxisbezogene Projektarbeiten mit Abschlusspräsentationen
  • Teaching Times: Full-time
    Monday 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: 16 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

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

Video editing with Adobe Premiere Pro CC

Adobe Premiere Pro (approx. 7 days)

Project orientation and format definition

Program interface

Text and object templates

Project, editing and monitor windows

Assembly of clips in the editing window

Transitions and effects

Video retouching and filters

Creating title sequences

Importing images, audio files and directories

Combination with other Adobe programs

Sound creation and editing

Working with fades

Color correction

Motion tracking

Import and export functions

Practical tips and tricks


Artificial intelligence (AI) in the work process

Presentation of specific AI technologies

and possible applications in the professional environment


Project work (approx. 3 days)

To consolidate the content learned

Presentation of the project results

Post-production with Adobe After Effects CC

Adobe After Effects CC (approx. 7 days)

Terms and standards

Format definitions

Project planning and organization

Importing and managing raw data

Motion control

Working with different layers

Compositions and timeline

Transfer modes, editing functions

Creating simple 3D animations

Creating visual effects

Working with keyframes

Rendering and render settings

Working with masks and text tools

Audio functions and editing

Time distortion

Vector drawing tools and retouching

Animated video clips

Light and camera, color correction

Keying, motion tracking

Import and export functions

Practical tips and tricks


Project work (approx. 3 days)

To consolidate the content learned

Presentation of the project results



Changes are possible. The course content is updated regularly.

You know the complete workflow for a modern web design and produce user-friendly and sophisticated websites. You will also master the basics of user interface and user experience and know the key guidelines and standards for graphical user interfaces so that you can test them for user-friendliness and adapt them to users. You will also be able to professionally produce digital video material with Adobe Premiere and Adobe After Effects. You will master various techniques to implement concepts graphically.

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).

We will gladly advise you free of charge.

0800 3456-500 Mon. - Fri. from 8 am to 5 pm
free of charge from all German networks.

Contact

We will gladly advise you free of charge. 0800 3456-500 Mon. - Fri. from 8 am to 5 pm free of charge from all German networks.