Specialization in No-Code Web Design

Influences | Mónica Durán

In this lesson I want to share with you some of the web designers specialized in Squarespace that I follow very closely. I will also show you some books and blogs on design and web design in general that have been very helpful in my training process, and that I continue to consult frequently.

For me it is super important to have creative references with which to inspire myself on a daily basis and to be in constant learning. In this lesson I will show you which studios and designers freak me out the most today.

Influences | Isa Macías

UX UI Design for Landing Pages: Tell an Original Story

Module 2

Ready to see how storytelling can shape design? Juan Mora, with experience at Google, Amazon, and YouTube, shows you how narrative techniques can turn a simple landing page into a memorable experience. Get hands-on with Figma and start crafting layouts that not only look great, but truly connect with users.

14 lessons (1h 46m)

Types of landing pages

In this lesson you will learn about different types of landing pages and I will teach you how to identify which one is the most suitable for the project you are going to carry out.

What is a good landing page?

Now I am going to explain with several examples how to identify the elements that make up an effective website.

What is hierarchy in content?

In this lesson I will tell you how to prioritize content and its importance in the storytelling of a landing page.

Contrast, visual balance and the 3 second rule

Finally, we are going to analyze the role that contrast and balance play in the navigation of a landing page. We will also see how to use the 3-second rule to our advantage.

The brief and how to investigate

The brief is the document that helps us to understand the needs of the client. In this lesson, I will teach you how to investigate from the interpretation of a brief.

Content structure for a landing page

Now I will teach you how to organize the content to tell a story based on the previous research.

How to make a mood board

In this lesson we are going to see how to create a mood board as a tool for analysis, inspiration and debugging.

The right typography

Finally, I am going to tell you about the importance of typography and I will explain how to select it properly so that it best suits the project you have in hand.

Story creation

In this lesson you will learn to take into account the behavior of people when they interact with a product, system or service. Also how to use this information as a basis for the organization of your story along with the structure proposed in the planning.

Put all the material on the canvas!

It is time to place on the canvas all the elements that you have collected during the course to start the design of your landing page. In this lesson I explain how to do it.

Create the assets you need for your landing page

Finally, I am going to tell you how to create your own assets from the material you find on the internet. I will also recommend where to look for them.

In this lesson I will teach you how to create the style guide to shape your landing page. We will have to define graphic and typographic elements to give consistency and unity to the design.

Design Definition

Polish your design: feedback

It is time to seek feedback on what we have done so far. This way we can adjust the necessary details to obtain the final design of the course project.

Presentation to the client

In this lesson I will show you how to present your project to your client and what you should take into account to explain the decisions you made to show what you did.

Module 3

Ever feel like your creative workflow gets messy too fast? This is your chance to bring clarity and consistency to your projects. Discover how design systems can streamline your process and elevate your website designs. With Figma as your main tool, you’ll explore smart structures that save time—and make your work shine.

20 lessons (4h 51m)

Introduction to Design Systems

In this lesson, I will present a short overview of what design systems are and how they're typically utilized. I will also elaborate on how my exact process works and why it's been beneficial for me.

How Design Systems Can Help You Speed Up Your Workflow

Next, I will give you some quick examples of how design systems can help you increase your efficiency, going over how global styles and components are helpful.

Introduction to the Project and Approach

Let's now go over the project we will be working on! I will create a general breakdown of what we need in order to have a successful start.

Setting up the Figma File and Beginning the First Explorations 1

First, I will go over how design systems can be created in Figma. Then, I will start the first explorations and collect some initial components.

Setting up the Figma File and Beginning the First Explorations 2

With these initial design explorations, we can play around with any and all ideas that come to mind. Let's see some more!

Expanding the Explorations and Design System 1

I will continue expanding my designs and layouts, as well as the design system itself. You will see how I utilize components and auto layouts, so you get a bit of a sense of how it works.

Expanding the Explorations and Design System 2

Once we have a more clear idea of what direction we would prefer to take the project in, we revise some of our initial choices and update our global styles throughout the layouts. Let's see how my project evolves!

Organizing the Design System Pages 1

In this lesson, I will be going over the components and styles I have created and start placing them on dedicated pages to have an initial sense of the structure.

Organizing the Design System Pages 2

I will continue refining my design system files. Remember, being able to refine a design system library at these earlier stages can reduce the time it will take at the end of the project when we're preparing everything for the final handover.

Exploring Variants When Creating Components

In this lesson, we will dive a bit deeper into components; you will understand how we can use variants to grow our toolkit even further. You will also get a better sense of how the naming conventions come into play within Figma and where you can explore to see which features you would like to highlight and have easy access to.

Refining the Design System with an Assembled Page 1

In this lesson, we will go over a further developed design. Now, at this stage, I have gone through a few iterations in my explorations and I have landed in a direction that I'm quite satisfied with. From here, we will take a deeper dive into creating components and auto layouts. We will also look at how combining these tools can help us create more dynamic flows and layouts.

Refining the Design System with an Assembled Page 2

I will continue refining the design system. When working with websites that have a lot of repeating content, content indexes or archives in general, I find it extremely helpful to nest multiple auto layouts, components, and instances within each other.

Refining the Design System with an Assembled Page 3

Spending a bit more time building a single layout with components and auto layout will help you see how different content formats can work in different instances. In case we realize after a few tweaks that the content we're working with actually doesn't agree with our initial vision, we can modify multiple instances of different content pieces at the same time in order to get a better sense of how our concept can be utilized in a real-world environment. Let's see how this design system and website will be structured.

15m

Setting up New Pages with the Complete Design System 1

Now I will expand the web designs with some new pages: a blog archive, a contact page, and a product gallery. The next step will be putting the design system to the test and seeing what elements work, what needs to be changed, and what would need to be added.

Setting up New Pages with the Complete Design System 2

After creating a blog archive and a blog post, I will show you how to build a contact page. This allows us to see how the design system we have created can help us quickly create these new elements.

Setting up New Pages with the Complete Design System 3

Here you will see how I create the final additional page, which is the shop page or product gallery.

How to Approach Creating Documentation for the Design System

In this lesson, I will go over two examples of creating documentation for a design system, using Notion and zeroheight.

Cleaning up and Using an Auto Layout

We will take a bit of time at these final stages to go over the website and design system and make sure everything is correctly set up and is using our standard notes.

Utilizing the Design on Further Brand Elements

Our design system doesn't have to stop at a website. In this lesson, I will show you a few examples of using the design system I have built as a starting point in creating additional brand elements such as social media posts and stationery.

And that's a wrap! In this lesson, I will go over a few additional thoughts on this whole process.

Final Thoughts

Website Creation with Webflow: Build a Site without Code

Module 4

Forget lines of code—Webflow opens the door to building sleek, functional websites through visual design alone. Guided by Jan Losert, you'll go from a blank page to a fully developed marketing site, learning how to shape standout digital experiences for any brand using intuitive, no-code tools.

21 lessons (5h 0m)

Introduction to No-Code

In this lesson, I will discuss how websites are created, and you'll explore Webflow and the resources library on Webflow University.

Let's explore all the panels and features Webflow provides and create a blank project to start this course's creative journey.

Webflow Core Features

We will look at the design and discuss what is essential to focus on before the project kick-off. Then, I will cover where to get royalty-free images for your project.

Design

Style Guide

In this lesson, I will discuss why to set up a foundation at the start of every project and add fonts to the blank project.

In this lesson, we start creating! First, we will set up all the initial elements, such as buttons and typography.

Style Guide Creation 1

Now we will continue exploring some buttons and combo classes.

Style Guide Creation 2

Let's begin by creating the top section of our website with a phone and a row of images.

Hero Section

In this lesson, I'll talk you through the building of the navigation menu for the website and how to make it responsive. We will be styling the component called Navbar.

Navigation

Now, we'll create picture cards representing case studies of the studio and sections with statistics of a business.

Case Study Sections 1

We will continue adding elements to the case study bloc.

Case Study Sections 2

I'll teach you how to create a collage section with pictures and testimonials in this lesson.

Collage Section 1

We will reuse the three-column section to create a bloc with the business's principal values.

Collage Section 2

Customers Section and Simple Newsletter Form

This lesson will look at creating a "we worked with" customers section.

Time to build the final section of the site – the footer.

Footer

We'll prepare the site for smaller viewports in this lesson, starting with the tablet view. I will also share some tips to make your life easier by using more strict rules for the width of our container and wrap class.

Tablet Viewport

Mobile Landscape and Portrait Viewport

We will make everything even more narrow and make sure the site looks great on mobile portrait and landscape.

We'll explore forms even further and style success and error states. And then, I'll show you where to find the form submissions and what can you do with them.

Testing Forms

Interactions

Finally, let's make the site more playful by adding subtle interactions for the hero section. Then, I will cover the difference between "Page Load" vs "Scroll in View" interactions.

SEO Optimization and Hosting

In this lesson, we will look at setting your SEO tags favicon and then putting our site live with a Webflow hosting plan.

Maintenance, Editor and Assets Panel

Let's talk about maintenance. I'll show you how to prepare the site if you would like to work with more people in the future and keep your project tidy and organized.

Explore CMS

I will show you how CMS works in the Webflow toolkit on a simple blog. Then, I will discuss how to build collections and use the dynamic data on static pages versus collection templates.

Defining the objective and structure of our website P1

Module 5

Color, structure, and strategy come together as Mónica Durán walks you through the creative freedom of building your own website with Squarespace. With her guidance, you'll explore how to shape a digital space that feels personal and professional—no code required. Unlock tools and techniques to design a portfolio that speaks for your work and attracts the right audience.

28 lessons (6h 13m)

To design a functional website (as well as attractive) it is important to be very clear about what objective we want it to help us achieve, because it will be based on this that we will organize the structure of the website and each of the pages.

Defining the objective and structure of our P2 website

In this lesson we are going to see examples of how these objectives correspond to design decisions within the web and the elements that we decide to include in our design (which ones and how).

The general style of our site

Now that we have created the structure of the web, we are going to broadly define the visual style that we want it to have. We are going to see, in a very simple way, how to combine fonts and colors, and I am going to give you examples of how you can use them to create a visual style for your website. I'm also going to give you some resources where you can look for inspiration.

Creation, organization and preparation of graphic files

We already have all the graphic resources that we will use on our website, and a general outline of the design of each page ... now we have to prepare all the files that we will use so that they are optimized for use on the web, and organized so that we can easily find them when we are designing in Squarespace.

Changes to the Squarespace content block interface

In this lesson I briefly explain some recent changes to Squarespce so that you know the differences between what you will see in the interface of the following lessons, and the interface that you will see on your Squarespace site when you are creating it.

How to choose the template for your website

In this lesson we are going to take a tour of the different templates that we find in Squarespace when we are going to create a new website. We will see what characteristics they have and what you should take into account when choosing the right one for your project.

Initial settings in Squarespace

With the account created we will take a tour of the entire Squarespace administration panel so that you become familiar with the different sections: Pages, Design, Commerce, Marketing, Analytics, Comments, Settings and Help. [textbox type=alert]Important note: After recording the lessons for this course, Squarespace released a new section in the admin panel, called Profiles or Profiles . This section is not particularly relevant for the course content, but it is worth exploring it a bit since from here you will be able to view and manage the profiles of: - Customers: people who have bought on your website, if you have an online store set up (and that is something we don't see in the course). - Subscribers: people who subscribe to your mailing list if you use the native Squarespace option. If you use an external email marketing tool (such as Mailchimp or Mailerlite) you will not be able to manage them from here. You can find more information about this new section of the Squarespace administration panel at this link.[/textbox]

Creating pages in Squarespace: their properties and settings

In this lesson I am going to explain the different types of elements that we have in Squarespace to create the “architecture” of the website: Pages, Collections (or Collection Pages), Folders and Links, since each one has different functions and characteristics.

The content blocks in Squarespace

Now that you know how the general structure of a website works in Squarespace, we are going to see how the structure of each of the pages is created and to explain better we are going to create a page to which we will add different Content Blocks, which are the elements that make up the design of any page in Squarespace.

The page sections in Squarespace

Now that we know what are the content blocks that we have in Squarespace, let's see how to integrate them with sections of pages to create the design of each of the web pages.

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

Using the sketches we made in Unit 2 and the content we added in our workbook, we'll create the Home, About Me, Services, and Contact pages, with all their sections, text, and images.

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

From the sketches we made in Unit 2 and the content we added in our workbook, we are going to create the Home, About me, Services and Contact pages, with all their sections, texts and images. For the moment, don't worry about colors or fonts, since we'll adjust that later: now the important thing is to create the structure of the pages.

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

On the contact page I will show you how to add a form and what you must do to include the text and the necessary box to comply with the RGPD (General Data Protection Regulation).

Portfolio P1 Page Settings

In this lesson we will see how to add a portfolio with projects to the web. I'll show you the different design options you have for your main portfolio page, how to add new projects, and the different adjustments you can make to individual projects.

Portfolio P2 Page Settings

Now we will see how to configure a Blog for your website. I will show you the different design options you have for the main Blog page, how to add new posts and the different general adjustments that you must make to each post before publishing it.

P1 Blog Settings

Footer creation and main navigation adjustments

In this lesson I am going to teach you how to configure the footer of the web to include everything that we defined in Unit 2. You will see that it is very simple and very flexible to make changes to the footer of your site, now that You are already proficient in Squarespace's sections and content blocks.

Setting the fonts and colors of the site P1

In this lesson I am going to show you the different options you have to define the style of the titles, subtitles and body text of the site. You will learn to change the fonts that the template brings by default, and to make some additional adjustments to modify styles differently from the default ones.

Setting the fonts and colors of the P2 site

Image Settings and Other Settings

With colors and fonts ready, we are now going to take care of making image adjustments and other details such as general site animations, spacing, buttons, browser icon (favicon), image for social networks, special page styles, among others.

Bonus: Web Styles in Squarespace 7.0

This lesson is for people who have Squarespace version 7.0 only. Here we will see how to make adjustments to fonts, colors and other elements of the web on a site designed in the old version of Squarespace.

We are going to see the elements that we have within the Squarespace Marketing panel and I will show you how to configure an advertisement bar for the web, as well as a pop-up window that you can use to promote some information or attract subscribers.

Marketing settings

In this lesson I will teach you how to create the legal pages of the site and link them in the footer. I will also show you how to configure the cookie ad bar and the settings you must make to it, and I will give you an alternative option in case you need a more advanced cookie bar if you are going to load additional cookies on your website.

General privacy settings

Let's make the P1 public site

Finally, we will see the steps necessary to make your website public: the different payment plans that Squarespace has, their characteristics, and which one I recommend for a website like the one we will do in the course.

Let's make the P2 public site

Site analytics tracking

Finally we will explore the Analytics panel of the site: I will give you a tour of its sections and I will give you my recommendations to get the best out of it.

Visual references: where to look for inspiration

No-Code Web Design with Elementor and Wordpress

Module 6

Bring your ideas online with personality and purpose as Isa Macías guides you through her creative approach to web design. Starting in Figma and moving into WordPress with Elementor, you'll learn to build dynamic, code-free websites that reflect your style while staying practical and easy to manage.

18 lessons (3h 23m)

In this lesson I want to tell you how important it is for me to look for visual references that inspire me when developing a web design project. I will also tell you where I find and keep those references to always keep them in mind during the entire site design process.

Site map and style guide

Now I am going to teach you how to trace the route that the user will take once they land on your website, that will give you a clearer idea about which pages you have to design and how they are linked to each other. We will also see how to create a small style guide in which to gather the general elements and styles that we want for the web.

Preparation of the design proposal 1

Once we have created the entire visual concept of the web, we are going to prepare the design proposal. This is one of the most exciting parts of the process! I'll start by designing the header, footer, and my home page.

Preparation of the design proposal 2

I continue to design in Figma the rest of the sections that I defined in the website map. During this process, remember to keep your references in mind!

In this lesson I am going to teach you how to install WordPress and what its basic operation is. This way you will be able to familiarize yourself with the full potential of this software.

First steps in WordPress

Now we are going to install Elementor, which is the tool with which we are going to build all the web design without the need to write a single line of code.

Install Elementor

Knowing Elementor 1

We are going to transfer to Elementor all the elements and general styles that we defined in the style guide. Since we already have everything thought out and defined in our guide, the process will be very easy!

Knowing Elementor 2

Now I am going to make a brief summary of the configurations that I showed you in the previous video. Afterwards, we will continue configuring and customizing other options such as the font set.

In this lesson I am going to explain what the Elementor theme builder is and why I am such a fan of it. Also, I will teach you how to use it to design the header of your website.

Header and footer 1

Now I am going to show you how I build the footer of my website with Elementor. Do you see how fast it is to work with this program?

Header and footer 2

It is time to design the first section of the web. The homepage is probably the first page they will see on your site, so this is where I always like to be most creative and visual.

Homepage

In this lesson we are going to work with Elementor's template options to create the individual project page layout. And, incidentally, I will also include all the projects in my portfolio.

Template for projects 1

Now I'm going to show you how I get to work with the responsive version of my project template.

Template for projects 2

The next thing that I am going to teach you how to design is the main page of the portfolio, which is where all the projects that we upload to the web will be archived.

Project archive

"About" and "Contact"

Finally, we are going to work on two essential sections on any website: the "About" page and the "Contact" page.

15m

Secondary pages: privacy, 404 and maintenance

In this lesson I am going to talk about some secondary sections of your site, which are not visible a priori, but are still there. And I will also teach you how to put your website in maintenance mode.