Design Workflow Blog

Landing pages design and dev

#web #landing-pages #email #forms

Abstract illustration of a ticking bomb in the middle of dependencies.

The website complexity trap

The technical debt of depending on frameworks and tooling for HTML and CSS

A screenshot of adding a link in the visual editor, with the local page dropdown.

How-to: browse your site while editing

Browse pages and make edits in the editor before publishing

Quality comparison of the five compatible web image formats: JPG, PNG, GIF, WebP, and AVIF.

Using modern web images

Comparing compatible image formats and deciding which ones are best to use

Abstract graphic of desktop, tablet, and mobile screen sizes.

Modern responsive image sizing

Determining when to use alternate responsive images, with a simplified output using only the img tag

Example of a website in light and dark mode.

Dark mode made easy

Two key techniques to simplify your website’s dark mode setup

Abstract illustration of a form with multiple steps.

Multi-step form without the overhead

Using built-in form GET method to pass data from one page to another without complicated code.

Examples metadata for sharing.

Essential metadata for sharing a page

The metadata options you need for social media and other apps.

Abstract icons of 15 commonly used web page design patterns.

Starter page components theme

30+ standard web content design patterns, based on hundreds of real-world websites, landing pages, and forms.

Examples of various listings.

Listing essentials

A list of related items — blog posts, products, events, etc.

Examples of various feature content sections.

Feature content essentials

Sections of skimmable content for visitors to get an overview of what you have to offer.

An example of a contact form using modern validation styling.

Modern form validation

3 modern CSS techniques for advanced form validation customization.

A screenshot of a modern form example.

Modern form design

Utilizing modern browser features to simplify the design process for forms.

Different examples of pages with forms.

Form essentials

Collecting different kinds of information from your visitors.

An example of two types of designs that utilize size, scale, density, and weight differently.

The design of a design system

Maintaining your design system and keeping it creative.

An illustration of example design system components broken down.

Rolling out your design system

Auditing current patterns and workflows and having your team join in the process.

An illustration of the pieces of a design system: colors, photos, components, and code.

A primer on design systems

Why you should have one and the main aspects that should be included.

Examples of different landing page designs.

The landing page approach

Even if you don't advertise, the landing page format is useful for more focused messaging and goals for your website's pages.

Examples of some landing pages.

5 core landing page techniques

How to ensure your landing page seamlessly ties in with email marketing.

An example of an email, and its landing page.

Emails with landing pages

The most effective way to gain audience interest, and conversions.

Some examples of the components included in the Starter page boilerplate template.

Starter page boilerplate

Our open source skeleton template that uses modern HTML and CSS code techniques as a starting point for developing custom landing pages.