Concepts is an infinite, flexible creative tool for all your good ideas. Available on iOS, Windows and Android.

Sketching Wireframes for Web Design

An Interview with Web Designer Charli Marie Prangley

Web Designer Charli Marie Prangley shares why wireframing is the first step in her design process, and why it's more important to be quick than neat.

"Design is such a wonderful mix of art and science, and to me, web design is the perfect embodiment of both of those aspects. You’ve got to be doing deep UX design thinking and problem solving while at the same time creating something that’s beautifully branded."

Charli Marie Prangley: I’m the Marketing Design Lead at ConvertKit - we make email marketing software for creators - and on the side I’ve been making YouTube videos about design on my channel CharliMarieTV for nearly 7 years. I also have a podcast called Design Life - about design and side projects - and lately have been working on designing a font. I love a good side project!

Right now I’m living in Spain after leaving London last year in search of more sunshine and lower rent prices (I work remotely, so why not!), but originally I’m from New Zealand. I went to design school in NZ’s capital, Wellington, and started my career off in print graphic design before joining the tech industry as a marketing designer for local software company Xero. Making that leap into tech was honestly one of the best decisions I’ve made in my career.

For fun I love to travel, try new restaurants, and go for long walks while listening to podcasts. I’ve been learning to play piano recently, too.

What do you do as a designer? What are you trying to accomplish in your designs for yourself and your clients?

Websites and landing pages are my specialty, and they’re also my favorite thing to design! Design is such a wonderful mix of art and science, and to me, web design is the perfect embodiment of both of those aspects. You’ve got to be doing deep UX design thinking and problem solving while at the same time creating something that’s beautifully branded.

Working in-house at a tech company, my main project is making constant improvements to our marketing website. I’m always looking for ways to make the message clearer and to increase the conversion rate of our site. I regularly get on research calls with creators (our target audience) to get their thoughts on my designs and learn what needs improving.

Lately I’ve been trying to bring more organic shapes into my web designs. The web is made up of rectangles, and sometimes seeing a nice flowing line or irregular shape is a nice change. It feels more human, which fits the ConvertKit brand perfectly.

What is your design toolset? Apps, preferred mediums and materials… What are your favorite creative approaches to design?

Figma is my design tool of choice for doing any sort of digital design, but I always start off a new web project by wireframing in Concepts first on my iPad. I’ll also use the Adobe suite in my work every now and then to create assets, like a product animation in After Effects or to edit an image in Photoshop. But I mainly use my Creative Cloud subscription for my side hustles: editing videos in Premiere Pro and recording my podcast using Audition.

Designers like to fight over which is the best design tool, but I think the best tool is the one that you feel comfortable with and that lets you bring your ideas to life easily. The best tool is one that doesn’t stand in your way of creating.

How do you use Concepts in your designs? What does the app help you to accomplish?

Wireframing is the first step in my web design process where I’m getting ideas out rapidly for different ways to arrange the information on the page. Before I got an iPad with an Apple Pencil, I used to wireframe using a pen and paper. Now, Concepts replaces the pen and paper for me. Its infinite canvas was a huge help to my process as I can just keep drawing without worrying about hitting an edge, and all of my wireframes are saved in one place to reference later.

My drawings are messy and probably not understandable to anyone other than me! But they’re the starting point for my ideas, and capturing them quickly is more important than being neat. Inspiration can disappear as quickly as it can strike, so as soon as I get that “aha!” moment for how best to arrange a piece of information on a web page, I need to be able to get it down on (digital) paper as soon as possible. If you spend your time making sure lines are straight and elements are perfectly spaced when you’re in the ideation phase, you run the risk of losing your bright ideas.

Do you have any tips or creative techniques you’d like to share about using the app? Favorite tools and workflow?

I probably only use about 1% of the features available in Concepts: my go-to is a black fixed-width brush (to replace an IRL marker pen) on a white background. It’s nice to know all of the other colors and brushes and options are there if I need them, but I appreciate that Concepts does the basics so well.

My advice to anyone else wireframing in Concepts is to not worry about being neat with your drawings, but DO try to stay tidy with your filing system by naming your drawings. When you’ve got dozens and dozens of black rectangle drawings on a white background it gets hard to tell your projects apart, so name as you go and your future self will thank you.

What advice do you have for other designers looking to share their creative voices?

Don’t let imposter syndrome hold you back, and don’t feel like you can’t share something just because you may not be an expert yet. My philosophy in creating content is to talk about things that I would have found really useful to hear from someone when I was getting started in my career. There will always be a designer a few steps behind you in their career who you could help immensely by sharing your experience so they can learn from it.

Everyone's creative process is different. Everyone has different inspirations and experiences, and the more we share them, the more varied the inspiration pool gets. So don’t be afraid to share what you’re working on.

Learn more about Charli's wireframing process in her video -

Charli Marie Prangley is a web designer based in Valencia, Spain who is passionate about side projects and helping creatives improve their craft and process. By day, Charli works as the Marketing Design Lead at ConvertKit, and in every other moment she’s creating weekly content on her YouTube channel, CharliMarieTV, and podcast, Design Life, sharing insights into life as a professional designer alongside tutorials and advice on design tools and concepts.

Interview by Erica Christensen

Sketching Wireframes for Web Design

Recommended