Specialization in No-Code Web Design

Course summary

• U1: Getting Inspired

  • Introduction

  • Influences | Juan Mora

  • Influences | Filip Felbar

  • Influences | Jan Losert

  • Influences | Mónica Durán

  • Influences | Isa Macías

• U2: UX UI Design for Landing Pages: Tell an Original Story

  • Types of landing pages

  • What is a good landing page?

  • What is hierarchy in content?

  • Contrast, visual balance and the 3 second rule

  • The brief and how to investigate

  • Content structure for a landing page

  • How to make a mood board

  • The right typography

  • Story creation

  • Put all the material on the canvas!

  • Create the assets you need for your landing page

  • Design Definition

  • Polish your design: feedback

  • Presentation to the client

• U3: Design Systems for Websites using Figma

  • Introduction to Design Systems

  • How Design Systems Can Help You Speed Up Your Workflow

  • Introduction to the Project and Approach

  • Setting up the Figma File and Beginning the First Explorations 1

  • Setting up the Figma File and Beginning the First Explorations 2

  • Expanding the Explorations and Design System 1

  • Expanding the Explorations and Design System 2

  • Organizing the Design System Pages 1

  • Organizing the Design System Pages 2

  • Exploring Variants When Creating Components

  • Refining the Design System with an Assembled Page 1

  • Refining the Design System with an Assembled Page 2

  • Refining the Design System with an Assembled Page 3

  • Setting up New Pages with the Complete Design System 1

  • Setting up New Pages with the Complete Design System 2

  • Setting up New Pages with the Complete Design System 3

  • How to Approach Creating Documentation for the Design System

  • Cleaning up and Using an Auto Layout

  • Utilizing the Design on Further Brand Elements

  • Final Thoughts

• U4: Website Creation with Webflow: Build a Site without Code

  • Introduction to No-Code

  • Webflow Core Features

  • Design

  • Style Guide

  • Style Guide Creation 1

  • Style Guide Creation 2

  • Hero Section

  • Navigation

  • Case Study Sections 1

  • Case Study Sections 2

  • Collage Section 1

  • Collage Section 2

  • Customers Section and Simple Newsletter Form

  • Footer

  • Tablet Viewport

  • Mobile Landscape and Portrait Viewport

  • Testing Forms

  • Interactions

  • SEO Optimization and Hosting

  • Maintenance, Editor and Assets Panel

  • Explore CMS

• U5: Creating a Website on Squarespace

  • Defining the objective and structure of our website P1

  • Defining the objective and structure of our P2 website

  • The general style of our site

  • Creation, organization and preparation of graphic files

  • Changes to the Squarespace content block interface

  • How to choose the template for your website

  • Initial settings in Squarespace

  • Creating pages in Squarespace: their properties and settings

  • The content blocks in Squarespace

  • The page sections in Squarespace

  • Design and configuration of the Home, Services, About Me and Contact pages P1

  • Design and configuration of the Home, Services, About me and Contact pages P1

  • Design and configuration of the Home, Services, About me and Contact P2 pages

  • Portfolio P1 Page Settings

  • Portfolio P2 Page Settings

  • P1 Blog Settings

  • P2 Blog Settings

  • P3 Blog Settings

  • Footer creation and main navigation adjustments

  • Setting the fonts and colors of the site P1

  • Setting the fonts and colors of the P2 site

  • Image Settings and Other Settings

  • Bonus: Web Styles in Squarespace 7.0

  • Marketing settings

  • General privacy settings

  • Let's make the P1 public site

  • Let's make the P2 public site

  • Site analytics tracking

• U6: No-Code Web Design with Elementor and Wordpress

  • Visual references: where to look for inspiration

  • Site map and style guide

  • Preparation of the design proposal 1

  • Preparation of the design proposal 2

  • First steps in WordPress

  • Install Elementor

  • Knowing Elementor 1

  • Knowing Elementor 2

  • Header and footer 1

  • Header and footer 2

  • Homepage

  • Template for projects 1

  • Template for projects 2

  • Project archive

  • "About" and "Contact"

  • Secondary pages: privacy, 404 and maintenance

  • Test and launch the website

  • Site update

• Final project

  • Specialization in No-Code Website Creation

Recent projects