Full transcript
0:00frame within an auto layout which is
0:02really clever so another piece of
0:04functionality that I can't get my head
0:06around sorry I'm not gonna say I can't
0:09get my head around I just got to play
0:10with it
0:11so this is something that I'm definitely
0:12going to be going into and playing
0:14around with a bit more let me see if I
0:16can just do it while I'm here
0:17potentially so let's just take
0:22let's come out of Dev mode obviously I'm
0:24in my playground
0:28let's drop some shapes in
0:30with that color
0:33boom
0:35let's give that a color
0:45let's give all these different colors
0:46let's see what we can do
0:48because it should be quite quite
0:50straightforward so
0:51I've actually created let's say you've
0:54got combination of things inside
0:56you know
0:57or that container
0:59doesn't container number one so you've
1:02got vertical
1:03let me not say that yeah vertical layout
1:06horizontal layout right but now you've
1:09got the ability to wrap
1:11so
1:12when it wraps it will just automatically
1:15drop down onto that second line
1:17and you can see how everything starts to
1:19follow that
1:20just really clever so everything within
1:22the auto layout frame or the auto layout
1:25I should say starts to wrap within now
1:27if it was just on horizontal what would
1:29happen is unless I set everything in in
1:32here
1:34to basically fill
1:36the frame
1:40you know if you want to maintain your
1:42height and width then that doesn't
1:44really work so now you can see
1:46everything's resizing within a frame but
1:47that's only because I've put everything
1:48to fill within the frame another way you
1:52could do it is set the container to hug
1:54but it only hugs the content within but
1:56even though it hugs the content within
1:58once you take that same frame or that
2:01auto layout frame I should say
2:03and you start to move it it becomes
2:05fixed
2:06so this ability to wrap keeps everything
2:09contained and constrained within that
2:11auto layout which is really clever
2:13and allows you
2:15to be able to wrap within a frame which
2:18is clever so yeah this is super good
2:20definitely something I'm going to be
2:22utilizing a lot more so you could it
2:24allows you to really think about how you
2:26build your components a lot better so
2:28let's say you had like a filter section
2:30and in that filter section on a web page
2:32you have multiple different options and
2:34then you might want to show it in uh
2:36tablet form mobile form but it's the
2:39same filter you might want options to
2:40wrap or something like that like a blog
2:42page with all these different filters
2:43that go horizontally when it's in
2:46desktop but it might wrap when it's on
2:47mobile potentially that could be a kind
2:49of use case there's multiple use cases
2:51by the way I'm just trying to think of
2:53head as how that could actually work
2:55which I think is super good as well so
2:57another thing I want to talk about while
2:59we're here I kind of wanted to share
3:01some design tips that I think would be
3:03super helpful let me just jump into a
3:05file quickly and just share with you
3:07some of the kind of things that I'm
3:09doing right now one of the key things I
3:10want to share with you is a kind of
3:13structure that I use when building out
3:15funnels when building out landing pages
3:17when I'm helping thinking about it with
3:19my teams or working with specific on
3:22Independent projects as well so this is
3:24kind of a way that I build out landing
3:25pages
3:26with a simple structure we call this the
3:30seven PS one two three four five six
3:34seven seven PS
3:36um of a landing page another formula
3:39that you can use is what we call Ada
3:41um and that's a really good structure to
3:43use when it comes on to landing pages
3:46which is the Ada principle so the Ada
3:49principle is awareness
3:51uh interest
3:54desire
3:56and then action and that could be a way
3:58that you can structure a web page but I
4:01kind of wanted to share this with you
4:02because this is really really good so
4:03let's say you take a landing page
4:06um that landing page uh is really
4:09something that you can work with so you
4:11might have okay what's the key promise
4:13that you're providing to that specific
4:16Avatar or that specific person that
4:18you're sending this product to service
4:19to and get specific right outcome in no
4:23time without this struggle so I always
4:25like to use numbers if possible so hey
4:28within the next 90 days try this or use
4:32this product within the next night or
4:33how this product can help change your
4:35life within the next 30 minutes I'm not
4:37saying how to do that but some kind of
4:39what we call a benefits driven statement
4:41and if you can connect it with some
4:43numbers or something like that that's
4:45really valuable as well I don't really
4:47like spitting off head like this I want
4:48to try and find some examples but I
4:50really want to show you this structure
4:51to help you so you've got your key
4:53promise that you might have top of the
4:54page
4:55and kind of some image that relates to
4:58whatever you're saying it could be a
4:59video could be a contact form Etc but
5:01you know image or video is ideal then
5:03proof is like who have you worked with
5:05before in the past
5:07um who are the companies that you're
5:09connected to who have you helped some
5:11kind of proof so this could be companies
5:14Awards associations ratings reviews uh
5:18some kind of proof to just social bring
5:20up Social proof uh what is the problem
5:22you're addressing and I've put here the
5:24top three problems your ideal customer
5:26is facing now plus a lead Magnet or some
5:28clear very clear quarter I should
5:31actually say lead magnet slash call to
5:33actions are very clear call to action so
5:36you can basically say headline about why
5:39we understand the problem uh headline
5:41with a unique selling proposition and a
5:43short summary of the key feature and how
5:44it benefits to the customer so you're
5:46just highlighting the problem you just
5:48agitating agitating then you've got a
5:50clear okay basically now you've know
5:52what's the promise what's the proof
5:55what's the problem now let me show you
5:57the process so what you'll learn uh
6:00here's how I will help you here's the
6:02process that we go through one two three
6:04one two three four like how do you
6:06actually do it and being very clear
6:08about that process as well and then you
6:11can go a bit into the person or the
6:14program or business
6:16Etc that you're highlighting and you can
6:18have it here so this is now where you
6:20might I use the black to say visually
6:22you're going to break the page do
6:24something bold different to kind of
6:25highlight who this person is or who this
6:28company is and what's so special about
6:29them uh then you can do more social
6:32proof again uh leveraging testimonials I
6:35find fantastic because that really is
6:37helpful and then you can go into his
6:39products or service and this is an
6:42optional one this product or service one
6:43because this product or service can come
6:45out and it could be where instead of
6:48product or service what you could do is
6:50you basically have some kind of what we
6:52call a lead Magnet download this guide
6:54uh this white paper Etc so you could be
6:58trying to give something away or you
7:00might have some kind of product or
7:01service that you want to sell that goes
7:03there as well
7:04um second page like if it's a funnel you
7:06can this is where you can use video
7:10um call out your ideal customer
7:13use the video and it's really clear so
7:15this landing page or invitation page
7:17could actually be the first step in the
7:19funnel uh but you can use both of these
7:21as structures so like you know when
7:24you've got video what's great is your
7:25your page
7:27density can be less because video can
7:30actually answer a lot more objections
7:32um you know then more social proof back
7:35to problem again but you may not need to
7:37highlight as much go deeper into the
7:39process
7:41um who you are who your business is ETC
7:44uh you know you can use something from
7:46what we call scarcity you know we only
7:48have X amount of spots we only work with
7:50x amount of people
7:52um this month we can only sign up two
7:54people will you be one of them Etc and
7:57then you can go into what we call risk
7:59reversal so this is basically
8:02um how can you provide in with some sort
8:04of guarantee so this could be if you
8:06don't make money in the in the first 90
8:08days you get all of your money back or
8:12maybe in a design standpoint you might
8:15say something like all right work with
8:17us and if you don't like what you see
8:19we'll just refund you all your money
8:20within the first 30 days or something
8:22like that so some way to just alleviate
8:25the risk and then some frequently ask
8:28questions relevant to this offer and
8:30then your foot all right so this is kind
8:32of like a clear structure two clear
8:34structures to different first pages in
8:36the steps now you might use all four
8:38stages where the first one you might
8:40want to go expand a bit more speak a bit
8:42more about your offer but I like to go
8:44specifically invitation page leverage
8:46video If you're not leveraging video you
8:48might use images but you might go deeper
8:50into the problem because you're not
8:51leveraging video
8:52and then offer page
8:55pay book a roadmap book a free strategy
8:57session it could and in the video
9:00this is not really clear because
9:02basically one of the key things you want
9:04to do
9:05is basically
9:07um
9:08you know you wanna what we call sorry
9:10calendly
9:11or some type of scheduling tool
9:16this is not actually correct yeah so
9:18ideally what you want here is some kind
9:20of like hey
9:21um this is where
9:24you can do two things you can basically
9:26send them straight to book a call right
9:28and that book of call would actually be
9:30this where you have
9:33an endley sometimes kind of skeleton
9:35tool or it could be hey
9:37let me tell you about what you're about
9:38to get
9:40let me go deeper into offer just one
9:41more step and then kindly so it's up to
9:44you
9:45um but more time what I'm finding is you
9:48really only need three steps like hey
9:50let me tell you what let me tell you why
9:52you should sign up for this call
9:53especially for service based businesses
9:55anyway this is great uh great funnel for
9:57service based businesses I should have
9:59clarified that in the beginning but I
10:01just use I like to use this structure to
10:03really help me think through how I'm
10:05building out pages and it's really
10:07helpful as well to go through this so
10:10here you could see where I'm I'm working
10:12with this
10:13an independent project working with this
10:15client uh his name's Garfield you can
10:18see here his current website yeah um you
10:22know to the designers out there you know
10:24you can already see the issues the font
10:26uh the Bold text
10:30um this is an actual graphic the actual
10:33image is a graphic with him stuck on it
10:35so it's not responsive uh you know
10:37placement of the button uh logo and
10:40graphical style the height of the logo
10:42the size of the icon like there's
10:44multiple different problems with this
10:46page you know the green color against
10:48the white background and contrast and
10:50how does it work and yeah there's just
10:52multiple things like just different
10:54sizes of text I mean you know the lack
10:57of accessibility you can't really see it
10:59potentially but like there's a slight
11:01different green on some of the buttons
11:03as well and the size of the buttons is
11:04slightly off
11:05why a couple pixels so yeah you know
11:08this page is a page that we wanted to
11:10think through as to how we could work
11:11and currently this project is still in
11:14process so like it's not complete but I
11:16just wanted to show you how I'm thinking
11:18about it leveraging the structure that
11:20you saw previously so here you've got
11:21some website copy
11:23and this is me just basically like one
11:26of the key things I love to do is think
11:29through uh okay what are we actually
11:31working on and before we actually go
11:33into design let's just get the copyright
11:36who we speaking to so I do a whole
11:38process around who is our ideal customer
11:40what's their pains what's their fears
11:42what's their desires what's their goals
11:44Etc going deep into that and then we
11:46kind of create copy that is reflective
11:48of who we're talking to right and the
11:50copy will help Drive the design uh and
11:53that's really helpful for so many
11:55designers so their previous logo the
11:58previous logo that he had uh was kind of
12:00this dated look and feel
12:03and you've got this kind of modern
12:05sincerest font with this serif fonts
12:07which is fine but the issue is the
12:11placement of the text just the way that
12:14it works in connection with his brand
12:17just didn't feel like the kind of
12:19Direction he went to go so one of the
12:21key things I did was kind of think
12:22through how we could redo the logo icon
12:25that was one of the first things I
12:27worked on making sure it looks good in
12:29black and white to re-change the font
12:32this font is called helvetica New medium
12:34extended uh and then as you're playing
12:36around with this one here which is
12:37called Canada Gothic what's beautiful
12:39about what figma have done now is that
12:42figma now have this preview
12:43functionality within fonts which is
12:45actually a plug-in previously which is
12:47called this plugin called font preview
12:49uh and I used to use this plugin called
12:51font preview but now I don't even need
12:54it anymore because uh figma now allowed
12:57I just wondered for the longest time if
12:59I'm honest why figma took so long to you
13:01know that felt like a kind of
13:03foundational
13:04uh feature why would you not want that
13:06with so many fonts on someone's system
13:07especially designers designers have tons
13:09of fonts on their systems but it took
13:11them ages to get this in but I'm just
13:13happy this is in because this is so
13:14beneficial for us as designers uh but
13:17basically what you can see here just
13:18playing with different fonts seeing how
13:20it works one of the color palettes
13:22because he's a finance coach he
13:24specializes in helping businesses
13:27improve their finances and reach a
13:29million dollars in Revenue
13:31um this is something that I was like all
13:33right could we use different color
13:34palettes he said he wanted something
13:35initially quite bold quite different to
13:38look separate from his competitors so
13:40one of the key things I forgot to share
13:41with you is
13:43I would basically go and do some
13:45research look up multiple different
13:47competitors online see how their pages
13:50are designed see how their layout
13:51layouts are
13:53um here's what I'm talking about when I
13:55say benefits driven statements
13:57leveraging numbers so discover how to
14:00feel loud safe understood happy and
14:02committed in your relationships whilst
14:04fixing any issues in under 90 days even
14:07if you're not the only one trying so I
14:10thought that quite interesting you know
14:11you've got
14:12um you've got this the kind of benefits
14:15driven statement to the ideal customer
14:17and that also has a very clear you know
14:22under 90 days uh promise you know very
14:24strong promise as well so this is
14:26something that I can see where okay the
14:30benefits driven statement makes sense uh
14:32clear call to action
14:33clear video here's what you're getting
14:36this training click on this link and you
14:38can go through in the final and that's
14:40why I want to show you in the structure
14:41of the landing pages here you can see
14:43some of the big boys in the space Mel
14:45Robbins some templates that I found on
14:47some you know I think they were kajabi
14:49kajabi templates that I saw
14:52um and it's just a few other like coach
14:54templates that I found as well and I was
14:56looking at like different color schemes
14:58to just be completely different from
15:00what he had found previously and what
15:03would that look like if me just playing
15:05around with um color palettes and seeing
15:07what works one of the color palettes I
15:08really liked was envisions color palette
15:11I thought it felt quite professional uh
15:13quite mature while at the same time
15:15quite modern if that makes sense
15:17uh just to look and feel I think it was
15:19done really well with this branding
15:23um and the color palette they've used
15:24seemed is quite a challenging palette
15:26but I think it's the way they've
15:28executed it is really really good so to
15:30The Envision team out there if any of
15:32you are watching this well done really
15:33good work really good work from you guys
15:35so yeah so just back to the original
15:37when I looked at it I just wasn't
15:39feeling it so I started to play around
15:42with the logo getting the logo right
15:44making sure that worked this is a quick
15:47project it's only a couple two it's
15:49about three days of work ideally after
15:52work so I'm doing this in the evenings
15:54after work just read it then you've got
15:55you know boom
15:58me playing around with it on here seeing
16:01if any of them stood out
16:02um and there was two that really stood
16:03out to me that kind of yellow on against
16:06the black was quite strong and then this
16:08black against the uh black against white
16:12was strong and then also this kind of
16:14green with this kind of off-white cream
16:16uh is what I liked as well so then I
16:19started to just not do designs of the
16:22website but just playing around with the
16:24actual layout on page he never the only
16:27thing is his images were not up to date
16:29no Modern Images just images that I had
16:33to like borrow from LinkedIn and stuff
16:35uh and see how can we just leverage I
16:37only have three images see what it works
16:39so it's just me playing around with that
16:41money green and seeing if and nothing
16:43worked like no matter how I structured
16:45the page nothing really worked
16:48so we had a conversation about this and
16:50you know content was
16:52still working on the content still
16:54working through design we're nowhere
16:55near there yet but one of the key things
16:58that we kind of landed on was this new
17:00visual uh brand new image which feels a
17:03lot more professional a lot better
17:04cleaned and kicked it right back just
17:07keeping it white but instead of me using
17:09the black I used the Dark Forest Green I
17:11use a dark forest green on the fonts and
17:13you can see here where we use this font
17:15here called Canada graphic extra mode
17:18csat 120 height because I was like
17:20anything less can feel like you can see
17:23here where the comma kind of TAPS into
17:25it and anything more than 120 kind of
17:28feels a bit too too spacious so I kept
17:31the line height here at 120 because I
17:32felt like that was like a really nice
17:35balance and then you've got like a
17:37couple pixels here about three or four
17:39pixels between that comma here so so I
17:43feel like they felt like this actually
17:44worked a lot better but I'm still trying
17:47to play with this kind of like
17:49serif fonts versus sans-serif fonts on
17:52the buttons so you can see here where
17:55we've got this font here what is the
17:57font here I use called New York extra
17:58large versus this one here called
18:01circular right you can see here where
18:03this one here is called circular so I'm
18:05just trying to see like which one would
18:07make more sense and I'm laying it out as
18:09well on the page and which one feels a
18:11bit better and then the structure I'm
18:13still trying to work through how content
18:15will be laid out on the page I'm not
18:16trying to get this design ready 100 yeah
18:19he's got an app so we're still going to
18:21get that screenshot in and get more
18:23content on the page
18:24but I was like okay cool so let me go
18:26darker and see how
18:29how a darker palette feels so this is
18:32kind of how I'm thinking about it just
18:33working through the different designs
18:36um I do have tons of competitors that
18:37I'm looking at but I'm not even trying
18:39to I hope you can see the difference
18:40between like some of these competitor
18:43websites and how they structure it it's
18:45like very much like heavy funnel driven
18:48salesy structures
18:51um to like a lot of their pages so it's
18:53all about funnels this is all funnel
18:55driven built-in click funnels so it
18:57looks like it exploded like funnel
18:59driven structure and style very American
19:01way of design which works really well
19:03for these kind of heavy funnels but for
19:06a landing page of a coach
19:09um this needs for me it needs to be just
19:11kicked right back who is who are you
19:13what do you do and keep it really like
19:16considered in the way that it presents
19:19himself as well so this will be playing
19:20with the kind of yellow as well how does
19:23yellow work
19:24um now I've kind of decided where we're
19:27using the Canada font here in the titles
19:29we might use a more sanitary respond
19:31here on the actual call to actions to
19:34see how that feels as well so I'm kind
19:36of Landing up on these two for now so
19:39where the money green
19:41uh the kind of dark forest green sits in
19:44the back and the money green becomes our
19:46core CTA on the site the rest of the
19:48site I'm still working through the
19:49design but I just wanted you to see this
19:51this as I'm working on something in
19:53progress but if you think about where we
19:55were over here on the left to where we
19:59are now to here on the right personally
20:01I feel like we're like completely in a
20:03different space right
20:05um talking to a much more mature design
20:08mature audience they understand what
20:10good design looks like how you present
20:11well
20:12and here you can see this is now how
20:16um you could feel a lot more confident
20:17having a site like this imagine this in
20:19Mobile where it starts to stack as well
20:21I feel like this will work really well
20:23so I'm still working progress if you
20:25guys want to see more like this let me
20:26know and I'm happily happily share that
20:28with you as well
20:30um so before we go on
20:32um one of the key things I want to talk
20:34about