Planning + wireframing a new landing page | Design With Me

The start of a new project is my favorite part! In this video I'm showing you how I got started with a new landing page web design project recently including all the messy wireframes and iterations.

🎁 New users can get 50% off CMS hosting for their first 3 months by using the code: friendsofcharli

Please remember to click subscribe if you'd like to see more of my videos!

--------------------------------

// WANT TO SUPPORT MY CHANNEL?

Become a ✨channel member✨ and get a cool icon next to your name in livestream chats, plus priority replies to your comments. Just click 'Join' (it's next to the subscribe button)

Sharing my videos or recommending my channel to a design friend is also very much appreciated! :)

--------------------------------

// ABOUT ME

I'm Charli and I'm designer from New Zealand currently living in Valencia, Spain. I’m the Creative Director at a remote tech company called ConvertKit and I posting videos about the design projects I work on and the tools I use, as well as vlogs of my life as a designer. I regularly livestream what I'm working on in Coworking Club streams. Welcome to the channel! Please subscribe and say hi in the comments, and maybe we'll see you in the live chat on the next stream.

--------------------------------

// MORE

--------------------------------

// TECH & TOOLS

💻 Software I use:

Links marked with a * are affiliate links. I can't believe you read the whole description box! You get a ⭐️

[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!

[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!

[eeka]

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.

[dna]

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

[safaecreates]

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

[rakhik]

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

[sarahrichardson]

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 !

[Sdority]

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!

[HappyPhantom]

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.

[aiman]

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

[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 👍

[keiradong]

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

[shiwangnath]

Please make more of such content, it's great

[nlamau]

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

[phidias]

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!

[royennev]

I love the Alien Hieroglyphics at 3:19 ✌👽

[Eatonfam]

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!

[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!