Planning + wireframing a new landing page | Design With Me

[@AmrutaRanade]

Loved the video! I am the microcopy-writer part of the UI design team and work with an awesome designer. So it was helpful to see the process from the designer's side :) We work in the opposite direction to yours: You get the copy from the writer and then design according to the brief, whereas in our case, he designs the UI first and I write copy based on what I think the design is trying to convey. Loved seeing how the process could work in the other direction!

[@charlimarieTV]

Actually I do the same thing! All the copy you see here was either taken from the old page or written by me. I like to write placeholder copy so that the writer I work with has a better sense of what should be talked about in each place. I did a video with her last year about our process if you feel like watching it! :)

[@AmrutaRanade]

@@charlimarieTV Oh! I actually did watch the video when it first came out, but I assumed your process had changed since then because the copy in this video looks so good! Kudos on doing an excellent job on placeholder copy 🙌🏽

[@koalatative]

The point about the initial wireframe is great, that might be the most underestimated step of wireframing- getting on the same page with yourself. Also love the idea of not stacking fields on top of each other and making the form more conversational!

[@safaecreates3361]

Hi, I just wanted to say thank you for helping me feel a little less intimidated by this process!

[@charlimarieTV]

You’re so welcome! I’m glad that this video helped :)

[@johnsweeney6534]

You provided an excellent introduction to a complex task. You ignore corporate branding, division rules, and project style, which defies the explanations of most designers. Still your enthusiasm and knowledge bring such a positive attitude to your work that your colleagues must really enjoy working with you. Often other designers are hard pressed to gather meaningful feedback from their colleagues and that is so important to both your project and your career.

[@dna1238]

Informative and well put together , reinforces the importance of the planning stage . Many Thanks

[@Sdority905]

I'm just getting started with website design and your videos are so informative and helpful! I love learning about your process and could hear you talk for hours. Thank you!

[@HappyPhantom668]

Thank you so so much for sharing this. I kind of got thrown into the UX/UI design field without any prior experience (coming more from an illustration/comic background). Recently got tasked with designing a Landing Page and there's so much stuff I didn't take into consideration. Your process and thoughts behind each decision are so helpful. I will now consult your channel before every new project.

[@rakhik6451]

Thoroughly enjoyed and learnt from this; please continue to share more!

[@eeka3109]

I love this! I wish more people did this! Every company is completely different and I feel like my process has to change at every place I am at and I feel like I could draw inspiration from other people explaining their process.

[@tsykin]

Thank you so much for sharing you thinking process! I was trying to find how wireframing looka from designer perspective and this video is exactly what I need. Keep up the quality content 👍

[@shiwangnath]

Please make more of such content, it's great

[@sarahrichardson2393]

As a designer *and* someone who happens to have filled out a ton of forms, I think the format for these you have chosen is a great option - very user-friendly. I especially like the "save and complete later" option, as well as the progress marks at the top of the longer form. Great video!

[@ivan.prosic]

This is a great great practical video that designer can use !

[@aiman1562]

First time watching something related to design. I'm intrigued!

[@lucaspiccoli]

Puuuuure gold! Thanks thanks thanks!

[@keiradong7512]

Thanks for showing the workflow of your design! For a junior designer this is super helpful! Love to see it more!!

[@nlamau]

I love videos like these. I get to see and learn how others work.

[@Eatonfam1]

I Charlie. My designs always start on paper. I’ve looking to switch to a digital beginning. Now, with my iPad and pencil I’ll be using the Concepts app. I love this format for you. Exactly what I’ve been wanting. More of the how-designers-think content. Thanks a bunch!

[@charlimarieTV]

glad you liked it! I'll definitely make more!

[@phidias51]

This is great Charli Marie! Whether you write code for a living, or design new applications, it's invaluable to be able to peek inside someone's thought processes, and see them work in order to learn from them. Thanks for sharing. I'm also interested in learning where you get your inspiration. For me, I like the Pinterest UI/UX pages. Thanks, again!

[@raysplaceinspace]

This was SUPER interesting! I LOVED this! I think seeing the raw material beforehand, seeing how complicated it looked and thinking "how would I solve this?" made me really want to watch through and see what you came up with in the end. Your way of showing progress through that gigantic form was a really great idea! I would love to see the final page when it's done!

[@nwezeonyisam6491]

Thanks so much, i have leant how the animation works now

[@bekahhisnanick7]

As a designer I really enjoy seeing how your process works. It has given me some ideas on my design flow and things that might work better for me, I really appreciate you sharing this! Thank you!

[@AureliaAndrea_]

thanks for saying that you look on other designs for inspiration.. it's what i needed to hear right now

[@entalpa]

All designers do that for inspiration.

[@designerdoes]

Really enjoyed this video, it's a very similar process to my own which is always nice to have some sort of confirmation you are doing things as others do. Also adding the comments in InVision before sharing the designs/wireframes is a great idea. I have only always used them for client inbound comments. Might save myself some questions covering points beforehand. Getting clients/colleagues to actually read them is another challenge!

[@agametedua]

I love it! I find these types of videos extremely useful from the way you think about the concept, to the way you have initial ideas and how those are reshaped before presenting the final first draft. I especially like how you explain the reasoning behind each choice. Thank you :)

[@charlimarieTV]

so glad you found this useful Agatha!! Thank you for taking the time to share your thoughts too :)

[@nancypalm]

I love seeing how other designers approach their projects! (Watching process videos of designers moving around type and objects on a page is my form of ASMR.) I also start with sketching to get ideas out, even if those ideas never end up in the final design. It's all about getting the brain engaged with the project. Right now I'm working on a digital book with six chapters. Once I get into InDesign, I'll end up with a ton of iterations. Once I've settled on which direction I want to pursue, I start a new version and move forward until I'm ready to present to the team. (Sometimes I will share some iterations at this stage, too.) Our presentations are calendared and I'll slack over the PDF ahead of time and then the team will meet on joinme for review. All in all, very similar to your process. Love those zipping in slides! :)

[@charlimarieTV]

I find iterating really hard in Indesign! I end up having to make so many new files cos I want to change the paragraph styles etc in one version.

[@felipearcila4800]

Genius. Thank you for sharing 😁👍

[@royennev]

I love the Alien Hieroglyphics at 3:19 ✌👽

[@lucijacetin8724]

Ooohhh this is a great video. I wish all of the tutorials and walk through videos would be like this, with all the reasons for the decisions and trail of thoughts and not just this is here and this will be there. All videos I ever saw were lacking something but this one I personally find VERY helpful and valuable. Thank you!!❤️

[@charlimarieTV]

yay!! This is the type of video I really want to see from other designers, so I'm really happy that other people are interested in this kind of content too! I'll definitely be making more :)

[@victoria6975]

Great and helpful video, i just started 4 months ago a new job as a ux designer. I finally changed from graphic design to ux design. But digital design is much more different from print design. Please do more videos like these! They're a lifesaver for me :)

[@charlimarieTV]

congrats on your switch! I made the same switch many years ago and have LOVED being a digital designer.

[@katekerns2165]

Really loved this video and seeing your starting process! I love the bit about waiting until a certain stage to get feedback. I feel like I often ask for or receive feedback too early and it can throw a wrench in my process.

[@charlimarieTV]

yes! because then you feel like you need to stop and address their feedback on one element of the page which can break your focus and flow on working on a different element.

[@cakeguy68]

Hey Charlie I love your channel. Today's video are my favorite, thanks.

[@charlimarieTV]

Yay! Happy you enjoyed it Dave :)

[@RyanSP]

Wow, how awesome to see such a detailed behind the scenes walkthrough Charli Marie, thank you!

[@charlimarieTV]

glad you enjoyed it Ryan!

[@twinklej5459]

So smart with the video layout Charli...and beautifully executed design in my opinion.

[@charlimarieTV]

thanks Twinkle!

[@alaeddinezaoug]

Great video, I don't do much wireframing, I jump quickly to detailed design and sometimes it creates for me creative blocks, I think I need to extend the time for the planning and wireframing a bit, Thank you for sharing your process

[@Jonesrful]

Super fun stuff. Really insightful understanding the raw thought behind the decisions of these designs. Awesome video!

[@LawnCrack]

Loved it!

[@HaunaniPao]

This is pretty much how I do it, I might still use paper and pen or whiteboard it. I use other tools, but I recognise your thought process as my own. that's nice to know. :) Ta!

[@thejasonresnick]

Outstanding walkthrough of your thought process, Charli. As someone who performs those ConvertKit migrations for folks, it's great to hear how CK is putting a focus on this.

[@charlimarieTV]

yess! and you do a great job!

[@thejasonresnick]

@@charlimarieTV thanks!

[@dhruvvalera3239]

Thank you for creating this video!! It's great to see your thought process. I'll binge watch your channel on my weekend. Keep it up Charlie!

[@dhruvvalera3239]

I would love to see how this goes further, have you made any next part yet?

[@charlimarieTV]

I've filmed the next video in this mini series but haven't edited it yet! stay tuned :)

[@shreeraj3125]

Well explained marie ❤️ beautiful design as you 🥰

[@briancormier1514]

Awesome explanation Charli!

[@KyleMerl]

great work! It's always helpful seeing your workflow.

[@charlimarieTV]

glad to hear it!! :)

[@snowsails]

Loved this video. Thanks. I'd love to hear about the next stage.

[@sudipbiswas9175]

I love this

[@phatedeath]

This video was amazing to watch! Thanks for sharing! I'm a developer that do most of the design, from wireframe to implantation. Very cool to see your design and thought process, as well as how you work with others. Thanks for making this vid!

[@charlimarieTV]

thank YOU for watching Darien!

[@Back101Space]

A great video showing the design process and design thinking of something most people overlook. As a strict practionar of Adobe XD, I have a question about your design tools. What factors help you choose your design tools? I know you've worked with Sketch, Invision and Figma. All of these softwares have been touched by hands as well; however I find myself coming back to Adobe XD. Can't wait to hear back and glad you're back on youtube making quality content.

[@entalpa]

I Love Figma

[@rodnokz]

This was awesome!

[@charlimarieTV]

thanks Ivan!

[@ondrejsvadlena2990]

Can't wait to see more.

[@NickStone]

Thanks for sharing its always interesting to see how people work through a project.

[@home.day.jemi.22]

Seeing your thought process and the development process was so helpful to see! Do you remember how long it took you to do the strategizing/mocking up of this landing page?

[@Sdority905]

I was curious about this as well.

[@Ritermann]

Also, I love how you edited the Video with the Slides on top and the style. Fun to watch.

[@charlimarieTV]

glad you enjoyed it!

[@adambarth178]

Great video, thanks for giving us a run through of your design process! Always very interesting to see what works for others (and maybe even borrow a step or two). Best of luck with this project!

[@Idkimblonde]

Great video, keep ones like this coming :)

[@e11e7en]

Fun to see how you work. Very similar to me. However I’m rewatch and look into some of those tools for sharing with your team. Seems like they really help streamline the explanation of flow through the site.

[@ohheybruna]

Thanks God, she's back!

[@charlimarieTV]

and she's not going anywhere!

[@jill3704]

Love this style of video (well actually I love all of your videos)! I've just recently started being disciplined in getting all of my own ideas out before looking for inspiration. Game changer in avoiding (for the most part) the inspo vortex, imposter syndrome and overwhelm. And Dribble is the best!

[@charlimarieTV]

inspo vortex is the worst!!

[@RonWaller]

Great video Charli. Was nice to see your thought process and how you plan out a project. Not everyone needs to be Bob Ross when jotting down ideas lol .

[@charlimarieTV]

haha ain't that the truth!

[@MarkWhiteartist]

this was very useful

[@saleemdigital]

lovely

[@davidpots]

Love this! If anything I'd love to see more of the initial sketching process - over time I've come to think that's such an important part of the overall process, even though to outsiders it may seem trivial.

[@yaldanemat]

Charli, I appreciate this video so much and I’m thrilled that you want to make more like it! It’s so helpful to see your process.

[@charlimarieTV]

yay! that makes me so happy!

[@sliiide-dk]

So so useful! Thanks for doing these videos 👏 I’m curious to know how you go from Figma > Invision? Export all Frames and upload manually? Or is there a magic-wand-trick? ✨

[@charlimarieTV]

Yeah I just export frames manually. I work on web design not product, so I’m only ever needing to upload one or two frames to invision. There’s probably a plug-in for it tho!

[@monabarzandeh377]

This was incredible! Thank you so much for sharing your process, I'm a digital designer in Auckland and hoping to get more into UX. It's so difficult to get the ball rolling because I just never know where to start when creating a landing page. Can't wait to see the final product :)

[@Diranlou]

I design all with codes. actually I understand codes way better than any other design tool.

[@SophiaVUX]

Hey Charli! Love seeing this! Definitely different than my process but so interesting to see how you work. When do you get to the point of figuring out what each FAQ might be? What each step will be? And for each migration level, really breaking down the IA of a level? Basically, I usually start with the real-deal content, then come up with the containers. I feel like you have quite a bit of filler and placeholder content. When does real content come into play?

[@charlimarieTV]

Great questions! The FAQ gets figured out by the copywriter (who talks to our support team to learn what common questions they get). As for the rest of the content, if you read the dummy copy in my end wireframe on the computer you can see that even though it is placeholder, it is filled with "real" content. All of my dummy copy talks about what we'll be communicating in that space. Content (for me) = the message or information that needs to be communicated and Copy = the exact words that will be used on the page. In the process with the writer I work with, she generally starts writing copy after seeing my wireframe, because I'm doing the research and design thinking to decide on the hierarchy of information on the page and what we'll go into detail about vs what will get a small mention. Of course, it's collaborative! So sometimes she'll start writing and realise something is more complex than we initially expected and needs more space to communicate, so I'll revisit the wireframe to make adjustments to allow for it. I hope that answers your questions!

[@stephh_nz]

This is great Charli - I found lots of inspiration in this! 👏

[@charlimarieTV]

that makes me happy to hear Steph!

[@Den23027]

Great video! Thanks a lot for sharing your process, was very interesting to hear about your approach. Would love to see more video like this one 👍

[@charlimarieTV]

great! I'll definitely make more :)

[@moza260]

new graphic designer room with a clean style in valencia...!! your design sketch is really artistic, kind of remind me with a doctor recepies?

[@charlimarieTV]

hahahaha yep my handwriting is just as messy as a doctors too!

[@jessebruce4454]

This was very helpful thank you! I am at the stage where I am designing a temporary landing page/home page for a startup. I like the idea of sketching and lofi designing before you look for inspiration. Sometimes I look first and I feel that skews my design from important for my client to what is pretty on dribbble. 🤷🏻‍♂️🤦🏻‍♂️

[@sofskrbic]

I love this type of video - super helpful and interesting! 😍 I'm not working as a designer yet - I'm still learning to become one. My process is quite similar to yours, actually. I start with rough wireframes on paper (because I don't own an iPad and drawing them anywhere else tends to take more time). From that, I start to explore my sketched ideas with lo-fi wireframes in Adobe XD and when I've found the one I think it's right, I'd move to hi-fi wireframes.

[@Ritermann]

Not that it matters the slightest, but this shirt fits you very well! :P Well I guess it matters a little bit.

[@jordanhunter287]

I really loved this video - thank you for sharing! It was nice to see that my process is very similar to yours. I also really like how you added lots of notes on your Invision file for people to look through as they tour your designs - I'm definitely going to steal that. ;P

[@charlimarieTV]

haha steal away!

[@stationlittle3786]

This was really useful, thank you! The end of the video is kinda like a cliffhanger. “Now we wait” :D

[@charlimarieTV]

Haha it’s a cliffhanger for me too! Wish someone could tell me how it ends 😂

[@balajinant]

Hey Charlie, May I know at what stage do you think about the responsiveness of the design? And how do you deal with this without having a problem during the development stage? Thanks.

[@charlimarieTV]

I'm always thinking about it! I just don't bother mocking it up at this stage, that comes later.

[@shadhinaocl5500]

loved it. but need a slow talk, please but full information is fantastic for improvement. reallyt awesome 🥰🥰

[@CyprianNziim]

Thanks for sharing your process, CharliMarie. I really like your thought process, on how to make the forms easier to use. I would like to know, how you would handle the mobile version of this project. Well, it depends on the analytics thou if the majority of the users access the site through web or mobile. But let's say you were to design the mobile version of this page, I would really appreciate you share your approach?

[@charlimarieTV]

I will share that when I do it! :)

[@JorgeAlbertoBenavidesOjinaga]

very brave of you showing your process,what is the screen size of the layout, What happen if the project need mobile versions?

[@charlimarieTV]

The project will 100% need mobile versions! I just prefer to start with desktop.

[@JorgeAlbertoBenavidesOjinaga]

CharliMarieTV I always do mobile first and work my way up, but it is harder to give personality to the work that way

[@sassisammi]

Absolute GOLD! Thanks for sharing your valuable knowledge. It is insane how cool watching this process is. Honestly just about to do my very first XD wireframe for a client and this was exactly what I needed to see at the time I needed it! GREAT JOB and THANKYOU so very much. Why do you use figma and not XD? Just wondering as I'm trying to figure out which is best for my process - I like that the CC libraries are available in XD.

[@charlimarieTV]

I just really like Figma and haven't bothered to learn XD yet. it seems to be more geared to product/app design and I'm yet to see any features that make me think it would be worth the time to switch for my web design process. honestly it doesn't matter what tool you choose though! the best tool is the one you feel confident using.

[@parveerbraich367]

Hey, the process is great and very similar with interior architecture. Can I ask if you test user viability before sharing for feedback to the team?

[@charlimarieTV]

nope! I create my wireframes based on what I believe will be the best user experience and I don't do any testing until the site is built (my testing focusses on how to improve what exists, rather than needing to test to see if something is viable)

[@parveerbraich1701]

@@charlimarieTV thank you for your insight. Very interesting because in the market there is a drive in AI based tests during protoyping to guide the design to maximise potential of user engagement /CTA. Have you come across any? If so just woundering what your thoughts are interms of if they are useful or not to support a designer.

[@cosmotk]

Great video Charli and happy to see that you're still using Figma :) ! Love this type of videos about the actual process of design. Quick question: Those components you made them specifically for this project or you have purchased them from somewhere? Thanks.

[@charlimarieTV]

They are components in the design system I’ve created for the ConvertKit website. Check out the Card on this video for a link to my video about the design system.

[@apex761]

Great video, as usual. I got question though, how is the submittal going to work for the form?

[@greatndabai]

What are the details of the Layout Grid you use? ( The Type, Width, Margin and Gutter)

[@ThermalGhost]

Aye great vid! Where you'd get the wrist support for when ur using the trackpad?

[@veerendrakumar9616]

Cool

[@charlimarieTV]

cool cool cool

[@rayc3103]

How long did the entire process in the video take?

[@OnyeStephen]

Amazing video; please can you like tell me the kind of question you ask from those who are requesting the design?

[@martinnov8k]

Hi Charli, love your videos :) Do you plan to do another video about Figma? I always wondered how to do for example those grid lines :D I really like it, but as I am not designer, but web developer I use it very rarely and get lost easily :D. Thank you

[@charlimarieTV]

In my Figma Design system video i think i showed the grid system and how I have it set up! What kinds of videos about Figma would you want to see? Maybe a Figma 101 video?

[@martinnov8k]

@@charlimarieTV Oh my, I will find it then, thank you :) And yes 101 video would be great :). PS: I hope we will see part 2 of this video :)

[@djVania08]

Hi Charlie, really great video. I work as Software PM, so I'd be coordinating some change like this. Could you tell me, how much time did you have for this? I am still not quite sure how long should this really be taking and what is the average. Time estimation is really struggle for me. Thanks. :)

[@charlimarieTV]

Hmm this was a while ago now so I can’t quite remember exactly, but I know a few other people asked this when I published the video. You could scroll through the comments and see what I replied to them back when the video was published!

[@djVania08]

@@charlimarieTV Uff. Did some digging and found it! Thanks :) (2 days spread over a week you said btw)

[@charlimarieTV]

Thanks for reminding me!

[@utibearchibong8608]

what is the plugin she is using for the sidebar widgets that resembles a page builder? Im still a noob... Thanks in advance...

[@charlimarieTV]

I'm using the design software, Figma :)

[@MaxWeir]

How much influence did the initial wireframe from your work colleague have on the project and was that shared with any stakeholders or project managers etc? The reason I ask is that with a current project I'm on there have been a few wireframes done by someone else which I feel could dictate too much how some of the page flows need to look like.

[@justsaybobby]

do I need to learn css and html when I can just use figma?

Also. Any reason why not starting on Mobile first or not using Google Material?

[@charlimarieTV]

I prefer to start with desktop, and we have our own design system for our marketing website :)

[@anzelledekock5119]

I’m interested to know where the copy for these projects come from. Do you have a copywriter writing this and do you tell them what sort of stuff needs to be communicated? I’m struggling at my job as an in-house designer with my team not fully understanding that I can’t design a website without copy and and an idea of what needs to be included on the site.

[@charlimarieTV]

I believe you can design a website without copy! I don't have final copy for this page I'm creating right now. I write placeholder copy to communicate what I think should be talked about in each section and when the design is a little further along, the copywriter will work on writing final copy based on that. You do definitely need an idea of what needs to be included on the site in order to design it tho. That is what I figure out in my conversations with the team at the start, and also from my own research of what I think should go on the site. It's highly unlikely anyone will tell us exactly what should go on the website, so we have to ask questions to figure that out, and also use our own intuition as in-house designers. I hope that helps!

[@swapnilkuwar7040]

All girls are good in designing

[@thezentrader]

Thank you for all these great tips as always! I was wondering what you'd think to have a P.O. box instead of my home address when I fill out the contract for my first client? It might look stranger but I don't want them to know where I live. Thank you!

[@charlimarieTV]

sounds like a good idea if you don't want them to have your address! :)

[@thezentrader]

@@charlimarieTV Great, thank you! :)

[@Addictiveg]

Do you have a list of programs that you use for your wireframing of a website?

[@charlimarieTV]

Concepts app for iPad, and Figma :)

[@hispagamers]

Hi saludos from Oregon

[@charlimarieTV]

Hola!

[@hispagamers]

@@charlimarieTV thank you for sharing it with us

[@MinimaLune]

As a UX researcher, I am wondering what your PO thought about the acceptance criteria side of this project, and also I am interested to understand the information architecture behind these pages since the old design seems so cluttered. I was wondering if you could have thought about gamifying the user story when filling those forms. And, generally speaking, no one likes to fill forms and it makes me wonder if you are improving a faulty design.

[@charlimarieTV]

We don’t have a product owner for the marketing site. Myself and the developer I work with are in charge of it. I’d argue that thinking about how to make the user feel as if they are progressing and seeing little rewards as they complete sections IS gamifying in a way! I’m curious to hear what you’d do though. As for the old page being cluttered, like I said, it hasn’t been touched by a designer before so there’s lots of room for improvement! :)

[@chienandaluz]

Great work! How long does it take this entire process?

[@rkvssr]

Great question :) I would love to know how much time those different stages (within this project) take. I know it's subjective because no project and context is the same but I'm still curious.

[@charlimarieTV]

This work was all done last week. It didn't take the whole week! I got a lot of other things done, but it was my main focus for the week. Perhaps two full days work? But split up over the week to allow time and space for reflecting and critiquing it with fresher eyes.