FULL web design process [STEP-BY-STEP]

Anna Hickman
13 Feb 202417:50

Summary

TLDRThe video script outlines a web designer's process for significantly increasing income by streamlining client work and focusing on strategy over aesthetics. It dispels common myths about web design, emphasizes the value of templates, and highlights the importance of understanding clients' needs. The script details the use of AI to enhance workflow efficiency and introduces tools like Framer, Figma, Notion, and Chat GPT. It provides a timeline for project completion, from research and strategy meetings to design and content implementation, and offers templates for various stages of the process to save time and ensure consistency in delivering high-quality websites.

Takeaways

  • 🚀 Streamlining the web design process can significantly increase a designer's income while reducing the time spent on client work.
  • 🔧 Using AI and templates doesn't diminish a designer's value; it's the strategic thinking behind a website that clients pay for.
  • 💼 Designers should focus on delivering custom solutions in strategy, aesthetics, and messaging rather than starting from scratch every time.
  • 📋 Myth-busting: Using templates does not disqualify one from being a designer, and knowing how to code is not a prerequisite for landing clients.
  • 🛠️ Framer is recommended as a powerful tool for web designers due to its speed and structure, offering a better workflow than other platforms.
  • 📈 A well-structured web design process includes research, strategy meetings, design phases, and client communication throughout the project.
  • 📝 The brand questionnaire and Chat GPT scripts are useful for generating ideas and streamlining the strategy development.
  • 🎨 Visual direction is crucial; understanding the client's preferences and market research helps in creating a unique brand presence.
  • 🔍 Competitor analysis is essential to identify opportunities for the client's business to stand out in the industry.
  • 📊 Aligning the website with the client's marketing strategy is vital for driving traffic and conversions.
  • 📚 Templates for website content and copy can make the content gathering process more efficient for both the designer and the client.

Q & A

  • What is the main focus of the web design process shared in the video?

    -The main focus of the web design process shared in the video is on the strategy behind a website, which is what clients are paying for, rather than just the aesthetic design elements.

  • What are the two myths about web design that the speaker wants to debunk?

    -The two myths are: 1) Using templates means you can't call yourself a designer, and 2) You need to know how to code to land clients as a web designer.

  • What is the significance of templates in the web design process?

    -Templates are significant because they allow designers to solve problems more efficiently by reusing solutions that work for multiple clients, thus delivering more value and saving time for custom solutions.

  • Why does the speaker choose to use no-code builders like Framer and Figma?

    -The speaker chooses to use no-code builders like Framer and Figma because they make the workflow quicker, simplify the design process, and make client lives easier, focusing on delivering a functional and visually appealing website without needing to code from scratch.

  • How does the speaker use AI to speed up the workflow?

    -The speaker uses AI, specifically Chat GPT, to help generate ideas and get the creative process flowing, especially during the research and strategy phase of the web design process.

  • What is the recommended timeline for the web design projects according to the speaker?

    -The recommended timeline includes research, a strategy meeting, approval of the strategy, design in two phases (homepage first, then the entire website), and implementation. The exact duration varies based on project size and experience.

  • What are the key components of the speaker's website strategy?

    -The key components of the speaker's website strategy include brand messaging, competitor analysis, marketing strategy, and website strategy and design direction.

  • How does the speaker ensure that the client's messaging is clear and consistent?

    -The speaker ensures clear and consistent messaging by creating a brand story script, discussing it with the client during the strategy meeting, and agreeing on the key messaging points to be used throughout the client's marketing and website.

  • What is the role of the brand questionnaire in the web design process?

    -The brand questionnaire helps gather crucial information from the client before the strategy meeting, allowing the designer to conduct preliminary research and come prepared with ideas for the strategy discussion.

  • How does the speaker approach competitor analysis in web design?

    -The speaker approaches competitor analysis by identifying the key competitors, analyzing their strengths and weaknesses, and using this information to find opportunities to set the client's business apart in the industry.

  • What is the importance of understanding the client's marketing strategy in web design?

    -Understanding the client's marketing strategy is important because an effective website must work in combination with their marketing efforts to drive traffic and conversions. It helps in guiding the website's design and content to align with the client's overall marketing goals.

Outlines

00:00

🚀 Streamlining Web Design for Increased Income

The speaker introduces a web design process that has significantly increased their income while reducing the time spent on client work to just one day a week. They dispel two common myths: that using templates devalues a designer's work and that a designer must know how to code to be successful. The speaker emphasizes the importance of strategy in web design and shares their process, including the tools they use, such as Framer, Figma, Notion, and Chat GPT, to enhance their workflow.

05:01

📝 Crafting Effective Web Design Strategies

The speaker discusses the importance of spending time on strategy to save time later in the project. They outline the components of their web design strategy, which includes brand messaging, competitor analysis, marketing strategy, and design direction. The speaker uses a brand questionnaire filled out by the client and Chat GPT to generate ideas, which are then refined during a strategy meeting with the client. The goal is to establish clear messaging and a visual direction that sets the client's brand apart.

10:01

🤝 Collaborating with Clients on Content and Strategy

The speaker explains the process of collaborating with clients to gather website content and finalize the website strategy. They provide templates for website copy and explain how to use them to streamline the content gathering process. The speaker also discusses the importance of understanding the client's marketing strategy to ensure the website design aligns with their goals and effectively guides users through the buying journey.

15:02

🎨 Designing Websites Efficiently with Framer

The speaker demonstrates how to use Framer to design and build websites efficiently. They explain the benefits of using components and site styles to maintain consistency and speed up the design process. The speaker walks through their workflow, from creating pages based on the sitemap to changing site styles and populating the sections with content. They highlight how Framer's flexibility allows for quick design changes and the creation of unique websites in a short amount of time.

Mindmap

Keywords

💡Web Design Process

The Web Design Process refers to the systematic steps taken to create a website, from initial strategy and planning to the final design and launch. In the video, the speaker outlines their personal process that has significantly increased their income and efficiency, emphasizing the importance of strategy and client collaboration over technical skills.

💡AI in Web Design

AI in Web Design refers to the use of artificial intelligence tools to assist in the creation and optimization of websites. In the context of the video, AI is used to speed up the workflow, particularly in generating ideas and content, but the speaker clarifies that AI does not replace the designer's strategic role.

💡Templates

Templates in web design are pre-built layouts or frameworks that can be customized for specific client needs. The video promotes the use of templates as a means to streamline the design process, allowing designers to focus on strategy and customization rather than starting from scratch each time.

💡No-Code Builders

No-Code Builders are platforms that enable the creation of websites without the need for traditional coding skills. The video mentions the use of such tools as a way to increase efficiency and deliver functional, aesthetically pleasing websites that meet client needs, without the focus on coding.

💡Strategy

In the context of web design, Strategy refers to the planning and decision-making process that shapes the website's goals, messaging, and overall direction. The video emphasizes the importance of a solid strategy to ensure the website effectively serves the client's business objectives.

💡Client Collaboration

Client Collaboration is the process of working closely with clients to understand their needs, goals, and preferences, ensuring that the final product meets their expectations and business requirements. The video highlights the importance of client input throughout the design process.

💡Efficiency

Efficiency in the context of the video refers to the ability to produce high-quality work in a shorter amount of time by optimizing the design process. The speaker shares techniques and tools that have increased their income while reducing the time spent on client work.

💡Framer

Framer is a no-code web design platform mentioned in the video that allows designers to create, design, and publish websites efficiently. It is praised for its user-friendly interface, component-based design system, and responsive design capabilities.

💡Brand Questionnaire

A Brand Questionnaire is a tool used to gather detailed information about a client's brand, preferences, and requirements. In the video, it serves as a precursor to strategy meetings, providing the designer with a foundation for research and discussion with the client.

💡Visual Direction

Visual Direction refers to the overall look and feel of a brand or website, including elements like color schemes, typography, and imagery. It is a critical part of web design strategy that helps to establish a unique and cohesive brand identity.

💡Marketing Strategy

Marketing Strategy in the context of web design involves understanding how a client plans to attract and engage with their audience online. It is essential for ensuring that the website is designed to support and enhance the client's marketing efforts.

Highlights

The speaker shares a web design process that has increased their income tenfold while reducing client work to just one day a week.

The process does not rely on AI to do the entire job, but uses AI to speed up the workflow.

The value of a web designer lies in the strategy behind a website, not just its aesthetics.

Templates are used to solve the same problem for multiple clients, streamlining the design process.

Knowing how to code is not a requirement for landing clients; the focus should be on delivering a functional and visually appealing website quickly.

Framer is recommended as a no-code platform for web designers, offering a quick workflow and better structure for responsive design.

Figma is used to create a strategy PDF for client presentations, while Notion is used for business management and organizing checklists and templates.

Chat GPT is utilized to speed up the research and ideation process for web design strategy.

The web design process includes research, strategy meetings, design phases, and a timeline that varies based on project size and experience.

A brand questionnaire is used to gather information from clients before strategy meetings, allowing for more effective discussions.

Crafting effective prompts for AI is essential to generate useful content, as AI itself is too generic without guidance.

The brand messaging strategy involves understanding sales psychology, copywriting, and storytelling to connect with the audience.

Competitor analysis helps identify opportunities to set the client's business apart in the industry.

Visual direction is crucial to ensure a cohesive brand presence and to elevate the client's brand above competitors.

The marketing strategy should be aligned with the website design to ensure traffic and conversions.

A sitemap is essential to plan the website structure and content sections, helping to avoid revisions and streamline the design process.

Website copy templates and content planning are used to make the content creation process more efficient for both the designer and the client.

Framer's component and site styles features allow for quick design changes and consistency across the entire website.

The speaker provides a comprehensive toolkit and templates for web designers to follow their process and increase their income potential.

Transcripts

play00:00

in this video I'm going to be sharing

play00:01

with you the web design process that has

play00:02

allowed me to 10x my income all while

play00:04

streamlining my actual client work down

play00:06

to just one day a week this is not a

play00:09

hack video I won't be showing you how to

play00:10

click one button and have ai do your

play00:12

entire job for you we will be using some

play00:14

AI to speed up our workflow but if

play00:15

anyone can generate a pretty nice

play00:17

looking website in one click then this

play00:18

means that your value as a web designer

play00:20

is in the strategy behind a website this

play00:23

is what clients are paying you for and

play00:24

this is what I'm going to show you how

play00:25

to deliver in this video I'm going to be

play00:27

sharing my entire process with you

play00:29

holding nothing back all the templates

play00:30

that I'm using in this video are

play00:31

available below so if you want you can

play00:33

get these to save some time implementing

play00:35

everything you're going to learn here

play00:36

but otherwise by the end of this video

play00:38

you're going to be able to copy and

play00:39

paste my process to have everything you

play00:40

need to start delivering a $10,000

play00:42

website tomorrow so before we jump in

play00:44

there are two myths that I hear a lot of

play00:46

my comments that I want to put an end to

play00:47

right now myth number one is that if you

play00:49

are using templates then you can't call

play00:51

yourself a designer a lot of people

play00:52

think that to deliver value as a

play00:54

designer everything has to be 100%

play00:55

customer and you have to start

play00:57

completely from scratch on every single

play00:58

project this is wrong design is about

play01:00

solving a problem and so if you solve

play01:02

this problem for one person then it

play01:03

makes sense to take that solution and

play01:05

reuse it to help more people solve this

play01:07

same problem and of course there's going

play01:08

to be certain Aesthetics and messaging

play01:10

that you want to be customed to each and

play01:12

every client but the truth is that

play01:13

there's a simple formula that works and

play01:15

stays the same for every High converting

play01:17

website and so you want to create

play01:18

templates as much as possible around the

play01:20

things that stay the same for every

play01:21

single project and what this allows you

play01:22

to do is deliver more and more value to

play01:24

your client you have more time to spend

play01:26

going above and beyond to deliver custom

play01:28

Solutions when it comes to the strategy

play01:30

the Aesthetics and the messaging because

play01:32

you're not wasting time building out the

play01:33

same pages and features from scratch

play01:35

every single time and so myth number two

play01:37

is that you need to know how to code to

play01:39

land clients as a web designer all

play01:40

clients care about is is it going to

play01:42

make me money is it functional does it

play01:44

work and look great and how quickly can

play01:46

you deliver it they do not care how you

play01:48

get there so it's your job to choose the

play01:50

best tools for the job that are going to

play01:52

make yours and your clients lives easier

play01:54

which is why even though I know how to

play01:56

code I choose to use no code Builders

play01:58

instead that make my workflow quicker

play02:00

and my client lies easier too so with

play02:02

that being said let me go through the

play02:03

tools that I'm going to be using so for

play02:04

the website build we're going to be

play02:05

using framer this platform is honestly

play02:08

the best thing to happen to me as a web

play02:09

designer I recently switched over to

play02:11

framer and it has made my workflow 10

play02:13

times quicker and you'll see why by the

play02:15

end of this video if you're a designer

play02:16

that's used to working in figma then

play02:18

this is going to feel very familiar to

play02:19

you the layout is very similar and it

play02:21

functions on the same free form canvas

play02:24

which gives you complete design Freedom

play02:26

so whereas before my design process

play02:27

would be to mock up the website in figma

play02:29

first before actually building the

play02:31

website in another platform now you can

play02:33

skip this step and design and publish

play02:35

the website within this one platform and

play02:37

unlike other Dragon drop platforms that

play02:38

are more designer friendly like show it

play02:40

for example frer actually has much

play02:42

better structure and responsive design

play02:44

that creates a more robust website which

play02:46

is why I know a lot of web design

play02:48

agencies are also making the switch from

play02:50

webflow to framer so we're also going to

play02:51

be using figma to put together the

play02:53

strategy PDF to present to the client

play02:55

next up is notion this is where I manage

play02:57

my entire business and so you'll see a

play02:59

lot of the checklist list and templates

play03:00

organized in here and of course we're

play03:02

going to be using chat GPT to speed up

play03:03

our workflow so to give you a quick

play03:05

overview of the entire web design

play03:07

process this is the timeline that I use

play03:08

for most of the projects that I work on

play03:10

and this is the best way that I found to

play03:11

break up the design process to give me

play03:13

time to get everything I need from the

play03:14

client and also minimize revisions by

play03:16

making sure I'm on the same page as the

play03:18

client throughout the entire project so

play03:20

I'll carry out some research and then

play03:21

we'll have our strategy meeting the

play03:23

strategy then needs to be approved

play03:25

before we get to designing and then I'll

play03:26

break up the design into two phases

play03:28

first the homepage design and then the

play03:30

entire website and of course this

play03:32

timeline is going to vary depending on

play03:33

the type and size of the project and how

play03:35

quickly you can Implement each stage and

play03:37

this is going to come with experience so

play03:39

you'll want to give yourself more time

play03:40

and be patient with yourself if you're

play03:42

just starting out but a big part of the

play03:43

reason that I'm able to deliver this so

play03:45

quickly are the templates that I use to

play03:47

streamline this process which is what

play03:48

I'm going to be sharing with you in this

play03:50

video so at the start of any project you

play03:51

want to spend a lot of time on the

play03:53

strategy this is key to saving time in

play03:55

your projects later on down the line

play03:56

making sure that both you and your

play03:58

client are on the same page before you

play03:59

do do anything else makes the rest of

play04:01

the project a breeze and it will help

play04:03

you avoid hundreds of revisions later on

play04:05

down the line it's also how you create a

play04:06

website that effective for your client's

play04:08

business and actually makes them money

play04:10

which increases your value and allows

play04:12

you to charge more so in my website

play04:14

strategy I include brand messaging

play04:16

competitor analysis marketing strategy

play04:18

website strategy and design Direction so

play04:21

every project starts off with a call to

play04:22

ask a lot of clarifying questions and

play04:24

agree this strategy together with the

play04:26

client but to make the most of this

play04:28

meeting you want to do as much research

play04:29

and preparation as possible before this

play04:32

which is why I get my clients to fill in

play04:33

this brand questionnaire at least one

play04:35

week before the call which will give you

play04:37

the information you need to start your

play04:38

research this is a strategy template I

play04:40

have set up in figma and before the

play04:42

meeting I will go in and start adding my

play04:44

notes to make this part easy we're going

play04:46

to use chat GPT to help us get the ideas

play04:48

flowing so here I have some prompts

play04:49

already set up for each stage of this

play04:51

process the thing with AI is that it can

play04:53

be extremely generic so for it to be

play04:55

effective you're going to have to learn

play04:56

how to craft expert prompts that are

play04:58

going to generate exactly what you're

play04:59

looking for cuz the truth is you're not

play05:01

going to be replaced by AI but if you

play05:03

don't learn how to make it work for you

play05:05

then you are going to be replaced by

play05:06

someone using Ai and so it's worth

play05:08

spending the time to put together prompt

play05:10

scripts like this to help you with your

play05:11

research I won't go through all the

play05:12

prompts that I have set up but they are

play05:14

included in the template bundle below

play05:16

and so once you take the information

play05:17

that you have from the brand

play05:18

questionnaire and run it through chat

play05:19

GPT you're going to have a great

play05:21

starting point but you still need to

play05:22

know how to take that information and

play05:24

use it to put together your strategy and

play05:26

the goal here is not to put together a

play05:27

perfect strategy because so far you've

play05:29

only had one conversation with your

play05:31

client and got some answers on a

play05:32

questionnaire so the likelihood is

play05:34

there's going to be nuances about your

play05:35

client's business and Their audience

play05:37

that you haven't fully understood yet

play05:39

but turning up to the meeting with these

play05:40

ideas is going to give your client an

play05:42

opportunity to clarify things and really

play05:44

get on the same page with this messaging

play05:46

so that by the end of the meeting they

play05:47

have a really clear idea of what you're

play05:49

trying to do and you've agreed the

play05:50

strategy going forward so the first step

play05:52

is your brand messaging any website is

play05:55

90% psychology and 10% design and so a

play05:58

huge part of your job is understand

play05:59

sales psychology copywriting and brand

play06:02

storytelling to help your client put

play06:03

together this messaging so the method

play06:05

that I use with all my clients is to put

play06:07

together this brand story script and

play06:09

this is from the book building a story

play06:10

brand I went through how to put this

play06:12

together for yourself in this video here

play06:14

and the process is exactly the same for

play06:15

your client and so if you haven't

play06:17

already go back and watch this to get a

play06:18

more in-depth look at what a brand story

play06:20

script is and how to use it but

play06:22

essentially this is all about crafting a

play06:24

story for your brand or your offer in

play06:25

order to connect with your customers and

play06:27

get them ready to buy from you and to do

play06:29

this we need a really good idea of who

play06:31

the audience are and what problems we're

play06:32

solving for them and so once you've

play06:34

clarified this and have run these

play06:35

through chat GPT to get some ideas

play06:37

flowing you'll be able to come in here

play06:39

and start filling this out for example

play06:41

these are the key messaging points from

play06:42

your story script don't copy and paste

play06:44

everything from chat GPT into here just

play06:46

grab bullet points and ideas because

play06:48

you're then going to go through this

play06:49

with the client and they're going to be

play06:50

able to add to this ideally they know

play06:53

what key problems Their audience are

play06:54

struggling with and what messaging works

play06:56

better than anyone so going into our

play06:57

meeting my notes might look like this

play06:59

and then when I go over this with my

play07:01

client they can see where I'm trying to

play07:02

go with this so they might add a couple

play07:04

of extra points or tell me that these

play07:06

points here aren't really relevant to

play07:07

their clients and then after this

play07:09

meeting you can take this and write it

play07:10

up and the purpose of doing this and

play07:12

putting it in this document here is that

play07:13

it gives your client clear messaging

play07:15

that they can use throughout their

play07:16

marketing and their website and they can

play07:18

then share this with their team or

play07:19

anyone else they're working with so the

play07:21

next step is competitor analysis so in

play07:23

your questionnaire you've asked for info

play07:24

about their key competitors and you can

play07:26

also do your own research here too

play07:28

because a lot of the time ESP especially

play07:29

if it's a smaller business that's coming

play07:31

to you they might identify their

play07:32

competitors as other smaller businesses

play07:34

like theirs because they think that

play07:36

those are the people that are on the

play07:37

same level as them but the reality is

play07:39

that as a small business your key

play07:40

competitors are usually the big dogs in

play07:42

your industry these are the people that

play07:44

your customers are actually comparing

play07:45

you to and so it's your job to help your

play07:47

customer Elevate their brand presence to

play07:49

position themselves alongside these

play07:51

industry leaders so once you've

play07:53

identified who these people are you want

play07:54

to analyze how they set themselves apart

play07:56

what they do well and what are their

play07:57

weaknesses and this is going to help you

play07:59

identify the key opportunities that you

play08:01

have to establish your client's business

play08:03

and set them apart in the industry which

play08:05

is what's going to help you put together

play08:06

your creative Direction now I know some

play08:08

people like to offer brand on web

play08:09

designs as a package deal or you might

play08:11

prefer to only work with clients that

play08:13

already have their branding sorted

play08:14

either is fine but regardless of how

play08:16

involved you are in the visual branding

play08:17

you still want to put together this

play08:18

visual direction to make sure you and

play08:20

your clients share the same vision

play08:22

before you get to designing so in your

play08:23

questionnaire you've asked some

play08:25

questions about their visual preferences

play08:26

and so now it's your job to take your

play08:28

client's vision any existing assets and

play08:31

then combine this with your market

play08:32

research to come up with a visual

play08:34

direction that will really set them

play08:35

apart and Elevate their brand presence

play08:37

and so you can use this mood board here

play08:39

to show how the photography style colors

play08:41

and fonts are all going to work together

play08:43

as a web designer you're going to want

play08:44

to get really good at sourcing stock

play08:46

photography because clients almost

play08:48

always need help with this and this will

play08:49

really make or break your designs and so

play08:52

I've left a free notion workbook below

play08:53

and in this I have my web designer

play08:55

toolkit with all the sites that I

play08:56

recommend for design inspiration and

play08:58

stock photog photography then on these

play09:00

next pages I like to create mockups of

play09:02

some website features and references

play09:03

that I'm drawing inspiration from this

play09:05

is really helpful to agree the design

play09:07

Style with your client before you start

play09:08

applying this to the entire website

play09:10

design and this is how you avoid huge

play09:12

revisions later on down the line then

play09:14

the next step is to take a look at their

play09:15

marketing strategy in this questionnaire

play09:17

you ask them about their marketing and

play09:18

this is important because an exceptional

play09:20

website that makes clients a lot of

play09:22

money has to work in combination with

play09:24

their marketing a website without

play09:26

traffic is completely useless and so you

play09:28

need to understand how your client is

play09:29

planning on getting people onto their

play09:31

website and what stage in the customer

play09:32

Journey this person is at give you an

play09:34

example a location-based business like a

play09:36

contractor with no budget or plan to use

play09:39

paid ads is going to get the majority of

play09:41

their business from organic searches

play09:43

within their local area so if they're

play09:44

planning on getting their traffic from

play09:46

Google a huge part of their website

play09:47

strategy is going to be centered on SEO

play09:50

this is going to be about creating blogs

play09:51

that answer questions that people are

play09:53

typing into Google and are relevant or

play09:55

even just related to their services and

play09:57

then these blogs will then need to

play09:58

nurture and build trust with their

play09:59

audience and guide them to the rest of

play10:01

their website where they have their

play10:02

services and their call to action but

play10:04

for me as a web designer I'm focusing

play10:06

all my marketing efforts on my organic

play10:08

content I'm not location based and

play10:10

there's a ton of competition when it

play10:12

comes to ranking for web design on

play10:13

Google so I might want the capability to

play10:16

add a Blog later on but spending too

play10:18

much time and energy on an SEO strategy

play10:20

right now is not my priority and so the

play10:22

focus of my website is going to be on

play10:23

high converting sales pages with

play10:25

qualified traffic coming straight from

play10:27

my social media this audience already

play10:29

know about me and my offer a lot of the

play10:31

nurturing and the trust building has

play10:33

already been done when they come on to

play10:34

this sales page and so this is just

play10:36

about keeping them on this page and

play10:38

getting them to take action and so

play10:40

hopefully you can start to see how your

play10:41

website works in combination with your

play10:43

marketing and So based on their current

play10:45

marketing plan you want to analyze your

play10:47

audience's level of awareness when

play10:48

they're coming onto the website and how

play10:50

your website is going to guide them

play10:51

through this buying Journey this here is

play10:53

what's going to help you put together

play10:54

your website strategy so when it comes

play10:56

to your website you have your clients

play10:58

goalss and you have your user goals and

play11:00

the website strategy sits in the middle

play11:02

of this it has to satisfy the needs and

play11:04

the questions of your users when they

play11:06

come onto here and then effectively

play11:08

guide them towards the action that you

play11:09

want them to take so we want to keep

play11:11

this in mind when we're putting together

play11:12

our sitemap this is going to lay out all

play11:14

the different pages and all of the

play11:15

content sections on these Pages now

play11:17

there are a number of basic sections

play11:19

that make up any website and once you

play11:20

learn these it becomes very easy to plan

play11:23

this and piece this all together so

play11:24

within this template bundle below I

play11:26

created a cheat sheet of all the key

play11:27

sections that make up a converting

play11:29

website with some different examples of

play11:31

how you can order them on different

play11:33

website Pages laying it all out like

play11:34

this is going to help you see how

play11:36

everything works together and check with

play11:37

your client if there's anything missing

play11:39

it's also going to help you with the

play11:40

next step which is getting your website

play11:42

content so after your strategy meeting

play11:43

you finish this PDF send it over to the

play11:45

client and they've approved this the

play11:47

only thing left before jumping into

play11:48

designing is getting the website content

play11:50

and for most web designers this is the

play11:53

most painful part that can really drag

play11:54

out a project timeline so to stop this

play11:57

happening these are the templates that I

play11:58

use to make the this as painless as

play12:00

possible for both you and your client So

play12:02

within here I have these website copy

play12:03

templates there's a services and an

play12:05

e-commerce version depending on the type

play12:07

of client and then Within These there

play12:09

are guides on how to fill this in and

play12:10

then each page is broken down into the

play12:12

key sections with copy prompts and

play12:14

examples these are also going to help

play12:16

you get everything you need for SEO

play12:18

website policies product pages contact

play12:20

form and so on in our sitemap we've

play12:22

already planned out our pages and laid

play12:24

out these sections and these templates

play12:26

are going to help us fill all this in

play12:28

and so what you want to do is check

play12:29

these templates against your sitemap to

play12:30

make sure that there isn't any

play12:32

additional content that you need for

play12:33

these Pages then once you've done that

play12:35

there are two ways you can use these

play12:36

with your clients if you are not

play12:38

including copywriting as part of your

play12:39

project then you can just give this to

play12:41

the client and they can fill this in

play12:42

themselves this is what I'll do

play12:43

especially if it's a shorter project or

play12:45

a lower budget client this enables the

play12:47

client to do this part themselves and it

play12:49

breaks it up so it's easy to manage and

play12:51

your client knows exactly what you need

play12:53

and if they're working with a copywriter

play12:54

then often they want an outline like

play12:56

this so they know the strategy and the

play12:58

intention behind in the content but if

play12:59

you're including copyrighting in your

play13:01

project which I recommend then I would

play13:03

use this template to get everything you

play13:04

need from your client again before your

play13:06

strategy meeting go in and make some

play13:07

notes in here basically to make sure

play13:09

that you know what questions you need to

play13:11

ask your client to fill in any of the

play13:12

gaps then you can fill this in as much

play13:14

as possible from the messaging that

play13:16

you've agreed in your strategy session

play13:18

once you've done this you can give it to

play13:19

the client to fill in any gaps and

play13:21

approve the messaging that you've

play13:22

written up make sure to let them know

play13:24

that it doesn't need to be perfect just

play13:26

add their notes in here and then you

play13:27

will help them write it out properly

play13:29

it's up to you what works best for you

play13:30

and your clients but either way having

play13:31

these templates ready to go is going to

play13:33

make this so much easier and quicker so

play13:35

you can actually get what you need to

play13:37

start designing the website okay now is

play13:39

the fun part you've been waiting for

play13:41

most designers will be itching to jump

play13:42

straight into this from the start but

play13:44

all the hard work that you put into the

play13:46

strategy and the website content is

play13:48

about to pay off the hard part is done

play13:50

and now you have as much freedom to be

play13:51

as creative as you like and if you've

play13:53

already set up your website platform

play13:55

with the right structure and templates

play13:56

ready to go then this part is really

play13:59

easy the last thing you want to do is

play14:00

start from a complete Blank Slate there

play14:02

are certain things that are going to be

play14:03

the same for every single website

play14:04

builder and so as much as possible you

play14:05

want to set these things up once and

play14:07

then reuse this for every client which

play14:09

is why I recommend sticking with just

play14:10

one website platform because you can

play14:11

have all this set up and really

play14:13

streamline your workflow so let me show

play14:14

you how I have my website template set

play14:16

up as I mentioned before we're using

play14:18

framer here so you can design straight

play14:20

into the platform and when you're done

play14:21

all you need is to hit publish So within

play14:23

framer I already have the essential

play14:25

sections needed for every website laid

play14:27

out these are the same SE that we broke

play14:29

down in our website copy templates and

play14:31

that we planned out on our s map and so

play14:33

the key to a really fast workflow is

play14:35

utilizing components and site Styles

play14:38

these are two things that a lot of

play14:39

website platforms have but framer has

play14:41

the most userfriendly setup that I've

play14:43

seen from a design perspective so each

play14:45

of these sections are set up as

play14:46

components and what this means is that

play14:48

when you make changes to one of these it

play14:50

will also change this section wherever

play14:52

you use it throughout your design so the

play14:54

most obvious things to use this for are

play14:56

your buttons your navigation bar and

play14:57

your footer but a lot of the content

play14:59

sections will repeat on different pages

play15:01

too and so having these all set up as

play15:03

components means that you can quickly

play15:05

make design changes that Implement on

play15:07

every page at once all of these sections

play15:10

also use site Styles so that when you

play15:12

change your site color palette and fonts

play15:14

here these will change throughout the

play15:15

entire website too so what this means is

play15:17

that if you design everything in the

play15:18

right order then you can very quickly

play15:20

design and build an entire website in

play15:23

very little time so let me demonstrate

play15:26

when I sit down to build a website I

play15:27

will always work for from a checklist

play15:29

here and so Step One is using the sit

play15:31

map create all your pages and put these

play15:33

sections in the right order step two is

play15:36

to change the site styles to set the

play15:37

colors and the fonts step three you want

play15:39

to make your way through these sections

play15:41

here starting with the global assets

play15:43

like buttons navigation bar and footer

play15:46

changing the style of these to match the

play15:48

visual direction from the strategy PDF

play15:50

and create a unique visual identity step

play15:52

four now it's time to copy in the

play15:54

website content and design each of these

play15:56

sections starting with the homepage page

play15:58

you can see as I change all of these the

play16:00

other Pages start to fill out as well

play16:03

where we're reusing the content sections

play16:05

throughout the website if there are

play16:06

sections that will have different

play16:07

content on them on different pages then

play16:09

you can separate these from their main

play16:11

component for example you might want to

play16:13

show different testimonials on your

play16:15

sales page to your homepage and so you

play16:17

would change the design of the

play16:19

testimonial section on the homepage

play16:21

first and then on the sales page you can

play16:23

select detach instance and it will let

play16:25

you change the testimonials here without

play16:28

making changes to the rest of these

play16:29

sections and so you can see that by

play16:31

doing it in this order you're able to

play16:33

very quickly Implement a consistent

play16:35

design across the entire website and

play16:37

because of how flexible the design is in

play16:39

framer compared to other platforms you

play16:41

can create a completely unique website

play16:43

in just a few hours and so this is why

play16:45

framer is an absolute GameChanger for

play16:47

web designers this is the smoothest and

play16:49

quickest workflow I have ever had if you

play16:51

want to use this setup for yourself then

play16:53

you can get this exact framer template

play16:55

below with all the checklists that I use

play16:56

for Designing and launching a website

play16:59

all the other templates you've seen in

play17:00

this video are also included the brand

play17:02

questionnaire chat GPT scripts strategy

play17:05

PDF and website copy templates and so

play17:08

you can take all of this and literally

play17:09

copy and paste my business to start

play17:11

delivering websites like this to your

play17:13

clients tomorrow but otherwise even if

play17:15

you're not working in framer I really

play17:16

recommend taking the time to set up the

play17:18

processes you've seen in this video in

play17:20

your desired platform because this

play17:22

really is the key to how I was able to

play17:24

10x my income while working less than I

play17:26

ever have before after watching this

play17:28

video you have the knowledge to go away

play17:30

and deliver a website tomorrow and if

play17:32

you've watched the other videos in this

play17:34

series you also have everything you need

play17:36

to start attracting clients that are

play17:37

willing to pay this so if you haven't

play17:39

already done so make sure to go back and

play17:41

watch these videos and if you've made it

play17:42

all the way through this series thank

play17:44

you for being here I truly appreciate

play17:46

all the love and drop me a comment below

play17:47

with what you'd like to see next on this

play17:49

channel

Rate This

5.0 / 5 (0 votes)

Связанные теги
WebDesignIncome倍增AI工具模板使用策略优化客户价值无代码设计效率营销策略品牌故事
Вам нужно краткое изложение на английском?