Professional Master in Graphic and Web Design


2 locations available
Read more about this program on the school's website

Program Description

communication, mockup, design

720 Hours (12 Months)

The content of this program is indicative, and it may vary for reasons of updating or modifying the contents.


Can you imagine being an expert in graphic design and web design? Being able to make your own designs to integrate them into your own website? The Professional Master in Graphic and Web Design combines the learning of the necessary knowledge for the development of two of the currently most demanded professions: graphic designer and web developer.

As far as graphic design is concerned, this Professional Master provides the student, on the one hand, with the necessary knowledge of the most important design and desktop publishing tools of Adobe (Photoshop, Illustrator and InDesign), which are the basis that any graphic designer should to dominate. Once these tools are perfectly managed, the student begins a second module: graphic production and creativity applied to design. In this module the student learns and internalizes the fundamental bases of creativity and development of any advertising, design or corporate identity project necessary to access the job market: branding, copywriting, pre-printing, art direction, advertising creativity, packaging.

Regarding the web design and development part of this master, composed of two modules, the student will learn the basics of the most used web design and programming languages in the world (HTML5, CSS3, JavaScript, jQuery) and also about management and content development in the most used CMS nowadays, WordPress (creation and installation of themes, platform configuration, installation of plugins ...), thus acquiring more than enough knowledge for web page design.


  • Adobe illustrator
  • Adobe photoshop
  • Adobe InDesign
  • Graphic production
  • Creativity applied to design
  • Plain text editor specialized in web: Dreamweaver / Sublime / Notepad ++ / Komodo Edit / Brackets
  • HTML5 / CSS3
  • Mobile-first Indexing. Bootstrap
  • SEO web positioning. Accessibility and usability
  • JavaScript
  • jQuery
  • WordPress web design
  • Web Conceptualization and Sketch
  • Quote and web planning
  • Web development and optimization in WordPress


720 Hours Total

  • In person or Online
  • 560 Hours of Classes
  • Monday to Thursday (+ some Friday)
  • 160 Hours Final Projects



  • 09.00 - 12.00 hours
  • 12.00 - 15.00 hours


  • 16.00 - 19.00 hours
  • 19.00 - 22.00 hours


€ 5,600

Check current offers and promotions at


  • Our school is one of the five Adobe Authorized Training Centers in Spain . This fact shows that CEI has fulfilled all the requirements that Adobe requests and, likewise, constitutes a guarantee of quality for all our students.
  • CEI is an Apple Authorized Training Center . Therefore, our students will be able to obtain the Apple Professional Certification and advance their careers in design and information technologies, business environments and B2B markets.
  • IBM trusts us and for this reason they have awarded us the IBM Education Partner badge. This seal rewards schools that maintain and promote quality training.
  • Our school is consolidated as the Maxon Training Center of reference in Spain and we became the 1st school in Europe to be Maxon Training Provider for R18 .

Graphic Design Module (Adobe Tools)

01- Adobe Illustrator

  • Color profiles and modes
  • Work space
  • Basic shapes
  • Selection Tools
  • Swatches / Color / Gradient
  • Strokes / Fills
  • Appearance panel
  • Work tables
  • Layers
  • Transformations
  • To line up
  • Pathfinder
  • The pen
  • The pencil
  • Brushes
  • Text
  • Eraser / Scissors / Blade
  • Expand
  • Interactive painting
  • Motifs, patterns
  • Symbols
  • Insert images
  • Interactive Tracing
  • Perspective grids
  • Transparency
  • Clipping mask
  • Gradient meshes
  • Effects edit
  • 3D effect
  • Text
  • Print and output

02- Adobe Photoshop

  • Color modes
  • Work spaces
  • The pixel
  • Layers
  • Basic forms
  • Selection tools
  • Paint pot
  • Degraded
  • Transformations
  • Inteligent object
  • Mergers
  • Brushes
  • Dropper
  • The pencil
  • Clone plug
  • Patches
  • Photo retouching tools
  • The pen
  • Clipping masks
  • Layer masks
  • Effects
  • Channels
  • Picture settings
  • Adjustment layers
  • Filters
  • Print and output

03- Adobe Indesign

  • Document / Book / Library
  • Pages and spreads
  • Work space
  • Margins and columns
  • Rules
  • Guides and grids (graticule)
  • The samples
  • Creation tools
  • Objects (containers)
  • Layers
  • Transformation
  • Lineups
  • Effects
  • Links panel
  • Lace
  • Master page
  • Typography
  • Character options
  • Paragraph options
  • Work with styles
  • Composition
  • Automatic paging
  • Interactive elements
  • Print and output

Graphic Production and Creativity Module

01- Graphic Production

  • Introduction
  • What is design?
  • Definition of "graphic project"
  • Graphic production processes
  • Design history
  • Visual language
  • Design elements
  • Composition
  • Color (the nature of color, color psychology, color modes)
  • Digital imaging
  • Formats (PDF, PDF.X, TIFF, EPS, GIF, PNG, JPEG)
  • Print types
  • Finishes and examples
  • Large format design

02- Creativity Applied to Design

  • Introduction
  • Visual communication (transmit through an image)
  • Concepts of creativity and creative attitude
  • The creative process in the graphic design environment
  • Creative processes (brainstorming, moodboards)
  • Fonts (classification and type combinations)
  • Typography applied to design (Truetype, Opentype)
  • Brand strategies, identity manual, applications, corporate stationery
  • Corporate identity (branding process)
  • Ideas search methods (pinterest, Domestika, Behance)
  • Basic packaging theory
  • Color in packaging (examples)
  • Creative exercise (representation of oneself through a letter)
  • Basic layout theory
  • Types of papers, finishes, weights, special inks, die-cuts (examples)
  • Tutoring of the final project

Web Design module with HTML5, CSS3 and Javascript

01- Web Design, HTML5 AND CSS3

Introduction to the use of computer equipment

Operating systems:

  • Windows
  • Mac
  • Linux

Software installation and management:

  • Browsers
  • Text editors

File system and folders

  • Create files and folders
  • Organization of web projects
  • Absolute, relative, and URL paths

Web browsing

Principles in Network Administration

Client-server architecture

Servers and protocols

  • SSL certificates

Client team

Introduction to routers and switches

DNS (domains and IPs)

  • Public IP
  • Local IP
  • Domain names

Hosting, housing & CPD

Basic principles for creating static websites

  • Languages used (HTML5 and CSS3)
  • Code execution flow
  • Visual structure of a website

Principles of usability and accessibility

Prototyping of a website (UX / UI)

  • User Interface (Marvel)
  • User Experience (InVision)


  • Tags and attributes
  • Semantics and usage
  • HTML5 document standard and structure
  • Comments
  • Paragraphs, headlines and text formats
  • Multimedia (Images, Audio and Video)
  • Links and buttons
  • Lists
  • Boards
  • Forms
  • iFrames
  • Meta tags
  • Favicom


Link CSS

Selectors and pseudo-selectors


  • Colors
  • Money
  • Format and transformation of texts
  • Height, wide
  • Edges
  • Margins
  • Fillings
  • Positions
  • Alignment
  • Shaded and gradients
  • Opacity
  • Transformations
  • Filters

Pseudoclasses (active, hover, checked, first-child, last-child, nth-child)

Pseudoelements (after, before)

Font import and implementation (media and font-face)

Icon import and implementation (fonts and SVG)

CSS variables

CSS animations (keyframes)

Mobile-first Indexing

  • General structures (Floats)
  • Simple Structures (Flexbox)
  • Complex Structures (CSS Grid)

Frameworks and APIs

  • Bootstrap 4
  • Materialize
  • Material Design


  • Create a domain
  • Creating a web hosting
  • Connection and upload of a website to the server


  • Link web with Google Search Console
  • Canonical link implementation

02- Web Development (Front-End)


  • Introduction to front-end programming
  • JavaScript. General syntax
  • Include JavaScript in HTML documents
  • JavaScript in attachments
  • JavaScript inside HTML code
  • JavaScript. Variables and operators
  • Local variables and global variables
  • Numerical variables
  • Methods for numeric variables
  • Assignment operators
  • Increment and decrement operators
  • Mathematical operators
  • Text strings (strings)
  • Methods for text strings
  • Undefined variables
  • NULL variables
  • NaN variables
  • Logical operators in JavaScript
  • Relational operators


  • Introduction to Jquery
  • Steps to use jQuery
  • First script with jQuery
  • JQuery Basics: Adding and Removing CSS Classes
  • JQuery basics: show and hide page elements
  • JQuery Basics: Quick Effects with jQuery
  • JQuery Basics: jQuery function callback
  • JQuery Basics: Using Basic Ajax with jQuery
  • JQuery Basics: Ajax jQuery with load message

Web Design Module with Wordpress

01- Web Design with Wordpress. From conceptualization to development


  • The Web. Types and structures
  • Google Mobile First Index
  • WordPress. What is it?
  • The web design. Creative process

Doing research

  • Investigation process
  • Analysis techniques

Quoting and planning

  • How much is my website worth?
  • Temporary work planning
  • Management systems to work web design

Conceptualizing the web

  • Inspiration and referral making
  • The visual identity. Web Styles Manual
  • Content tree creation
  • Sketch or wireframes
  • Creation of mockups with Sketch
  • Web prototyping with Invision
  • Presentation to the client and content preparation

Creating content

  • Copywriting
  • Types of contents
  • The generation of content in WordPress. Post and pages
  • The images. Types and treatment for web
  • LOPD. Installation and regulation

Developing our website

Knowing WordPress

  • Local and server installation
  • Preparation of a WordPress. Essential steps
  • Structure of WordPress and its interface


Media Library: Image Optimization

The topics

  • Types of topics
  • Explaining a topic

Moving our design to WordPress

  • Designing the bodysuit

Visual Composers: Visual Composer and Elementor

Addons and complements

Creating web in Mobile first

Contact forms

  • Designing custom headers. The menus
  • Designing custom footers
  • Own creation of templates and snippets
  • Creation of custom layouts for post
  • Creation of custom post types and their layouts
  • Create custom fields

Ecommerce: Woocommerce

  • Explanation and configuration of an online store
  • Create custom product templates
  • Checkout modification and configuration
  • Required plugins

User management in WordPress

  • User roles
  • User Registration
  • Creation of private areas and memberships
  • Viewing content according to roles

Website translation

  • Using the plugin
  • Translation of themes and plugins

WordPress export and backup

Other plugins of interest: sliders, sharing on social networks, feeds, chats.

Optimizing and protecting our website

Performance optimization of our WordPress

  • Code optimization
  • Cache installation

Wordpress protection

  • Protection of access to WordPress
  • Protection of contents and folders
  • Protection against external attacks

Developing our website

  • Introduction to Inbound Marketing for WordPress
  • Creation of site maps
  • SEO plugin installation and configuration

Developing our website

WordPress maintenance techniques

Last updated Aug 2020

About the School

CEI - Centro de Estudios de Innovación - es una Escuela de Diseño Digital del siglo XXI, fundada en el siglo XX (año 1991). Somos un centro de formación oficial de Adobe, Apple, IBM, Maxon y Google Pa ... Read More

CEI - Centro de Estudios de Innovación - es una Escuela de Diseño Digital del siglo XXI, fundada en el siglo XX (año 1991). Somos un centro de formación oficial de Adobe, Apple, IBM, Maxon y Google Partner, especializado en el sector del diseño y marketing digital, con sedes en Madrid, Sevilla y próximamente también en Lisboa. Nuestros cursos, masters y títulos superiores se desarrollan en cuatro áreas: Diseño gráfico, Desarrollo web, Marketing Digital y Edición y Postproducción de Vídeo Digital (VFX) y Motion Graphics. Read less
Madrid , Seville , Madrid + 2 More Less