Designing a website - Episode 1: Planning & site map!

Рет қаралды 476,940

Күн бұрын

Welcome to a new series where I'll be taking you through the whole process of redesigning and building my website from start to finish! Please remember to subscribe bit.ly/1aE5UOT
The very very first thing I do when approaching a new design project is plan (shocker!). For a website, that means sitting down and thinking through firstly what the goal is for the site and why visitors might be on it, and secondly what pages and templates will need to be designed in order to bring it to life.
In this video you'll see me make a plan for my website, both for the full site map of my new blog and portfolio, and also for an "MVP" simple landing page I'll be starting with first.
Hope you enjoy the video and are excited about the series!
// LINKS
Concepts (the app I'm using in the video):
apple.co/2DHaEUQ
Webflow* (what I'll be using to build my site):
charli.link/webflow
Watch the full series: • Designing and building...
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)
Or, if you like, you can put something in my tip jar right here: pages.charlimarie.com/product...
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.
💬 Twitter: / charliprangley
📷 Instagram: / charliprangley
--------------------------------
// MORE
Join my free weekly marketing design newsletter: charli.link/newsletter
Buy my hand written font, Grayscale: charlimarie.com/font
Book a mentoring session with me: charli.link/mentoring
My site & blog: charlimarie.com
Design Life podcast: designlife.fm
Inside Marketing Design podcast: insidemarketingdesign.co/
--------------------------------
// TECH & TOOLS
📹 Get links to all the tech hardware I use to make my videos (and the art on my gallery wall!) right here: charlimarie.com/shopmyoffice
💻 Software I use:
Webflow (no-code website builder)*: charli.link/webflow
Premiere Pro (video editing)*: charli.link/premierepro
Adobe Audition (audio recording)*: charli.link/audition
After Effects (intro animation)*: charli.link/aftereffects
Figma (web design): charli.link/figma
Photoshop (thumbnails)*: charli.link/photoshop
ConvertKit (marketing platform): charli.link/try-convertkit
Riverside (podcast interview recording)*: charli.link/riverside
Music in this video from Epidemic Sound*: charli.link/epidemicsound
Video captions by Rev (very cost effective service! I recommend)*: charli.link/videocaptions
Intro & end card animation by Austin Saylor: www.austinsaylor.com/
Editing by Nancy Palm nancypalm.com & Belén Albiol / molen.audiovisual (or sometimes by me!)
Links marked with a * are affiliate links. I can't believe you read the whole description box! You get a ⭐️

Пікірлер: 298

@imenziani2288 6 жыл бұрын

I love how you make it feel simple and possible for any one to do. In this series I think you're going to show us or give us ideas on how to think when wanting to design a website more than how to actually do it which is great. I really like it. Keep up the hard work.

@hannahferreter 6 жыл бұрын

Loved this video and the idea for the series. I learned the hard way of the importance of an outline/site map while designing the drama department website for my school. I was so excited about the actually designing that halfway through the project I was left with multiple pages floating in the menu which did not need to be there. After creating a site map the website all came together. Thanks for the video! I can't wait for the next one!

@ArielBissett 6 жыл бұрын

This is great! It's always so good to understand what goes on behind the scenes!

@kamil4403 3 жыл бұрын

This video is more interesting for people that want to learn how to do it i think

@xiaoyejiepai Жыл бұрын

Our company's website is done by Qinyitong Studio.

@andru2080 6 жыл бұрын

Interesting to see how you work :) Whenever I built websites in the past, I always made a quick list of pages and jumped ahead to sketching out the pages themselves on paper but it's so obvious and makes sense to build a site map like this first!

@adriankenepah3673 6 жыл бұрын

Super rad idea, Charlie! Really looking forward to this series. I love learning about different processes and methods people use for building out websites. One thing I do, which may be overkill, is a whole discovery process of the site. Really diving into the type of people who may be visiting the website (a fan, causal visitor, company looking to hire, someone looking for inspiration, etc). Obviously this varies throughout the type of project you’re working on, but it helps with the design and UI/UX portion of the website by finding the commonalities with each individual visitor and basing my structure and content off of that. Anyways. Keep killing it! Again, really I looking forward to the next part of this series!

@Paigeboyd1 6 жыл бұрын

So glad to see a series like this! I study Interaction Design and have been building websites for three years now but it's always interesting to see other peoples' process - thank you for doing this! :)

@agadiri1974 5 жыл бұрын

yes

@rosetyler5822 6 жыл бұрын

Thank you for taking the time to make this, Charli. You are an inspiration!

@skeeterbrookscreationsllc2106 5 жыл бұрын

THANK YOU...THANK YOU...THANK YOU!!! This video was GREAT!!! Watching you go through just this simple yet important stage was very clear and helpful to me.

@brunildaserrano3951 5 жыл бұрын

Very helpful. Thank you so much. Looking forward to the rest of the episodes to complete the new web site.

@elaineanderson4891 5 жыл бұрын

Thank you. I'm in the design process right now.

@KatrinaEames 6 жыл бұрын

That was super interesting! I'm planning out a website and this is really helpful for me.

@manoharr8812 3 жыл бұрын

I do have a non-commercial website that needs redesigning as I am including diverse and expansive material. Your thinking as how to organize content is of great help to me. Thank you very much.

@Adanmacreates 6 жыл бұрын

I just started my interface Design class and I have to work on a website brief, this was great to watch for inspiration!

@hfortenberry 6 жыл бұрын

I'm excited I found this! You are where I want to be in a couple of years! Thank you for sharing so much!

@agadiri1974 5 жыл бұрын

@designerannaplay7160 6 жыл бұрын

I am already visualizing the final version of your website having a clean Material design, which is responsive with any device. Nice one Charlie...! Good Luck...!!!

@Waqas4hmed 6 жыл бұрын

Amazingggggggggggggggggg! Thanks charlie! Loved it when people do start to finish process.

@jalabi99 6 жыл бұрын

Best part of it was when you decided to make an MVP site in order to not get overwhelmed. Looking forward to the rest of the series.

@Reeder6Wisconsin 6 жыл бұрын

Thanks for the great video. Looking forward to seeing how you continue the process.

@indurekhasahu 3 жыл бұрын

This is great! and very helpful for me to get my plan for my website finished in the right way :) Thank you so much for sharing!

@milililie 6 жыл бұрын

I can't wait for the next video! It's great to be able to see other designer's process, I always like when people make series like that, I always learn tons. Good luck with your new website, I bet it's going to look neat. :)

@Kate-is5mz 4 жыл бұрын

Who the hell dislikes videos like these?! Like, why is there always THAT person... this is a very good, informative and insightful video, who would anyone ever have a problem with that, jeez... anyway, great video, subscribed!

@DanicaChristin 6 жыл бұрын

This video really makes me what to redesign my website. At the moment it's just a wordpress blog but I could do so much more with it

@chris-adams-tas 3 жыл бұрын

This is a good explanation of the process of determining Site Architecture IMHO, thanks for sharing Charli.

@jean-claudemosquera5635 6 жыл бұрын

Ready for this series!! Thank you!

@cineselena 6 жыл бұрын

I really need to re-up my website (it’s pretty lacklustre and I’ve been paying for it to hang out that way for over a year...) thank you so much for doing this series!!

@snakeg6 3 жыл бұрын

Thank you!! Love the series , subscribed and made it simple to follow (specially that I’m visual!)

@mkiorboe 3 жыл бұрын

I´m redoing my entire portfolio and this was a great input to my process 👍

@elizabethmessina6322 6 жыл бұрын

love the series idea!! so excited for more of them

@veronicasnair2800 6 жыл бұрын

Love the idea of this series, so helpful!

@charityrosypal7102 6 жыл бұрын

loved this can't wait for the next one in the series!

@kydune8152 2 жыл бұрын

The way this has cleared my skin. Thank you

@pebre79 6 жыл бұрын

Nice start. Looking forward to the next episodes

@MoZenLen 6 жыл бұрын

Im so excited for this series :D

@jethrojohnson117 4 жыл бұрын

Thanks Charli! I will be using your video for flipped learning to broaden the scope of understanding of my students about site structure.

@charlimarieTV 4 жыл бұрын

That’s so cool to hear!

@BeastXm316 5 жыл бұрын

Hey Charli! This was super helpful. Thanks a ton

@heidykatheryn8279 2 жыл бұрын

Great this is what I was looking for, someone who walk me through step by step. Thanks youuu

@steparko23 5 жыл бұрын

I find that when I’m on my phone or iPad, using a mind mapping app allows me to record site map ideas easily and efficiently. It shows the basic page linking structure that I can come back to and reference later.

@jeanwangg 6 жыл бұрын

those process and details about starting a business is going to be so helpful and crucial to so many freelance designers like me! these are all necessary but not a lot of individuals post about them. it'd be great to see a designer be transparent about that!

@charlimarieTV 6 жыл бұрын

I think I’m going to do a ‘financial year in review’ where I talk about my first year having an LLC. Sounds like that might be useful?

@themuddabeyonceshow7154 2 жыл бұрын

I know this video is 3 years old but it was super helpful and not overwhelming.

@ToriLillytheauthor 6 жыл бұрын

This is so cool! I love your channel because I want to be a web designer!

@cagatayelmaci9874 4 жыл бұрын

Gosh! Thought u 've got a kiwi accent then checked your page and you really are! Greetings from CHC!

@fangfang5422 Жыл бұрын

This is really great sharing of the process the thinking flow! Appreciated the effort and kindness! Thank you~~

@thedynamiteguy7597 4 жыл бұрын

Fantastic info! Impatiently waiting for more!

@emily2555 6 жыл бұрын

Super excited for this whole series! I'm getting ready to build my own site as well, and though I plan on using WIX (I think, unless anyone else has a strong case for a different platform??) because I don't know enough about coding, this is going to be super helpful in just the whole thought process and everything. Can't wait to see how it all comes together!

@acharyamanish20 6 жыл бұрын

Hi Emily.. I would like to know how it went with your own website as I am also building my website and do not know coding. Please let me know. Waiting :)

@andrewd5482 6 жыл бұрын

If it’s a crazy simple site, wix will do, but if you plan to do more than just have a few pages, I suggest WordPress. I can spend 5min to go help you decide

@gordrik1591 5 жыл бұрын

Well described, clear and easy to follow = Good stuff = Subscribed. Thank you for this :)

@pockets08 4 жыл бұрын

HELLO HUMAN, saw this and only 10 seconds in - SUBBED. Super excited to watch this series.

@fura9761 4 жыл бұрын

why?

@phoebe_272 6 жыл бұрын

thanks for posting this! I'm working on building a website this semester so this is super helpful for getting my creativity flowing. Also all the videos you post are everything that i do, oddly enough. You're like my british twin lol

@agadiri1974 5 жыл бұрын

@marycrisestrella2246 2 жыл бұрын

Hi @CharliMarieTV It is my first time learning how to design a website because it is a requirement for my current subject in college. I watched 2 of your videos including this one and it helped me figure out how to create my own web design. Thank you so much. Love your content.

@charlimarieTV 2 жыл бұрын

Glad it was helpful!

@mautopsy 6 жыл бұрын

Thanks for your videos - very informative and inspiring at the same time)

@thepetaldragon 3 жыл бұрын

This is a great resource, thank you!

@twinklej5459 6 жыл бұрын

Great video Charli! Can’t wait for the future episodes...i did set up a goal to learn to create websites... this video really helps me with that too.. KUDOS GURL! Also...on a completely different point...your hair looks amazing 😀

@charlimarieTV 6 жыл бұрын

Haha thank you! This is what it looks like when the purple has completely faded from it haha

@malikm76 4 жыл бұрын

Great stuff. You are very organised designer. This gave me great inputs for my own project. Thanks. Subscribed. I could not understand why you didn't want to continue with Wordpress ( which is the world's largest CMS) and rather go with Weblow instead. Actually thats my gripe with wbsite designers who approach me to get business from me. Using technologies like Webflow always makes me in 'need' of a website design company. Good for them.

@dibinsabu3225 4 жыл бұрын

It's always good Charlie and I am becoming a web designer soon

@jkbullitt8986 4 жыл бұрын

Superb! One of the best examples of the high level planning needed for site building. More pls!!

@charlimarieTV 4 жыл бұрын

Thank you! Will do!

@iamjasonthompson 6 жыл бұрын

Nice... this is so important. I remember when I was a novice I would just jump into Photoshop and start building. the result would be dredfully awful websites. 😂

@davehansel9715 Жыл бұрын

I really like the way you explain things! I have someka's sitemap generator to create sitemap diagrams. Easiest way to create a sitemap chart imho. Thanks for the video! On to the episode 2:)

@Alex-jp2ml 6 жыл бұрын

Such an awesome idea! loved it:)

@kpopdance_lover 6 жыл бұрын

Thanks for sharing your process. What app were you using, if you don't mind sharing that info?

@annachino3602 4 жыл бұрын

Your video has actually helped and cleared the brain fog for me! Fantastic, thanks!

@charlimarieTV 4 жыл бұрын

I'm so happy to hear that! Glad I could help :)

@gergemall 6 жыл бұрын

Thank you it sounds wonderful

@sharonmathew2127 6 жыл бұрын

Hair is looking real good, Charli! 😻 the layers and colors 👌🏼

@sharonmathew2127 6 жыл бұрын

Also, I think blog posts about your business process would be ABSOLUTELY HELPFUL!! I was looking forward to hearing your insight since the first time you mentioned this in a video. There's not a lot of content out there that helps creatives with this side of their work. Thanks Charli!

@DeependraTube 6 жыл бұрын

You figured out " the real thing "... 😀😁😂

@syntheticsynesthete2542 6 жыл бұрын

damn excited for this

@JeramieSaito Жыл бұрын

This helps with my planning. Thanks!

@dimitrijejovanovic6779 5 жыл бұрын

Like Your new purple design ;)

@Madwolfx_ 2 жыл бұрын

10:50 min well spent. Great content. 💪

@PinoyBoyy 6 жыл бұрын

I’m super excited!

@charlimarieTV 6 жыл бұрын

Yay! Glad to hear it!

@RodrigoAbdalla 4 жыл бұрын

Thank you Charli! 👏👏👏

@jizhang3696 4 жыл бұрын

Thanks Charli, it’s really helpful

@bambowers8177 5 жыл бұрын

So when can e expect content on starting an LLC and working with an accountant? I'm very interested in hearing this topic from another designer, as I plan to do this in 2019 myself. Great vid btw!

@samanthab3526 2 жыл бұрын

This was really nice and helpful. Thank you :)

@boogeyman81 3 жыл бұрын

She looks so cute. Cheers from Brazil!

@anjaliartworld 4 жыл бұрын

Hi! did you end up setting up a store on webflow? I'm trying to set up a store for art prints and was looking at their business plans and it seemed quite steep. would love to hear about your experience if you've used these features.Thanks!

@mr_crisi 6 жыл бұрын

Hi Charli! I love all your content! Your videos and insights are very useful and clear! Do you think you can make a video (or write in this comment section?) how do you make e-commerce websites? (if you already have done one) I don't know if you already talked about that topic, didn't find it in your uploaded videos... I'm struggling in finding the best option, I understand webflow is bringing that option in the future. What are your thoughts? Thank you and keep rockin' with your content!! :)

@kishanbrahmbhatt762 5 жыл бұрын

Thanks for making it

@AS-ld5mz 4 жыл бұрын

hi Charlie, what software are you using to write on the screen?

@anjalijain4470 5 жыл бұрын

It was really helpful .thanks

@tristangriffiths4083 4 жыл бұрын

What system are you using to to the write up? I see your using a tablet, what software are you using to do all the writing on, its like an infinity canvas :). Love your work!!

@pixelwebdesign623 5 жыл бұрын

Excellent vid, more please.

@sarielreigns777 5 жыл бұрын

Wow! Thank You!

@MrOmidAmirian 3 жыл бұрын

that was light up :) thank you a lot

@sasavlog03 2 жыл бұрын

This is literally saving me from misery because I have an assignment about this

@whitneylove1471 6 жыл бұрын

Which camera and lens are you using for your videos? Looks flawless!

@dankast4483 2 жыл бұрын

Clean!😊👍

@ozzyfromspace 3 жыл бұрын

Super random, but I love your NZ accent 💯😊💃🏽

@KamranMehmood2312 4 жыл бұрын

Hi Charli, Greetings from Pakistan...it's good to see a post with great details and it help me a lot to understand the basic idea about building. website. I request you to please add some more advice about the selection of technology for website building backed by the reasoning. Regards, Kamran Mehmood

@edsbloggingcom 6 жыл бұрын

On what are you writing? Interesting vids by the way.

@hr4f774 4 жыл бұрын

Thank you

@charlimarieTV 4 жыл бұрын

I agree! However I do know how to code. But I don’t work as a developer so I don’t identify as such.

@hr4f774 4 жыл бұрын

@@charlimarieTV oh thats just plain lovely Ive seen some of your other videos you do know how to develop, I think the fact that you are a developer as well is why you know the difference and have your terms on point. I hate hearing people "develop" a website on wordpress while its jut really drag and drop

@charlimarieTV 4 жыл бұрын

Wordpress is only really drag and drop if you’re using a theme like elementor or divi though! At the company I work for our website is built on Wordpress CMS but zero part of it is drag and drop.

@hr4f774 4 жыл бұрын

@@charlimarieTV of course there's company developers that develop wordpress websites in php , but you'd be amazed how many wordpress drag&droppers call themselves developers

@judewandjo8974 5 жыл бұрын

Great work

@machinery10 Жыл бұрын

Hey thanks! Love this.

@Denvercoder 6 жыл бұрын

You're so good that sometimes stuff gets written on the screen when you have both of your hands up. :P

@chukwumaudokporo2586 5 жыл бұрын

Hello CharliMarie, I would love to know what webflow plan you currently are on and what the benefits are. Thanks

@mdruhulamin9132 3 жыл бұрын

Great everybody very helpful to see this video.

@mdruhulamin9132 3 жыл бұрын

Are you need the Best Web Design Professional Expert Designer Tehran. Leave the design of your own website to the professional design team of Spad Company. Your website reflects the values, beliefs and identity of your business, also referred to as a virtual office. (Best Web Design Professional Expert Designer Tehran)(بهترین طراح متخصص حرفه ای طراحی وب تهران)With a professional website, your business will be available to anyone who needs your services anywhere in the world, 24 hours a day, 7 days a week. Contact us if you need professional website design. More information Click this Links:www.spad.co/services/website-design