Designing a website - Episode 1: Planning & site map!
ฝัง
- เผยแพร่เมื่อ 29 ก.ค. 2024
- 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 ⭐️
This is great! It's always so good to understand what goes on behind the scenes!
This video is more interesting for people that want to learn how to do it i think
Our company's website is done by Qinyitong Studio.
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.
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!
Thank you for taking the time to make this, Charli. You are an inspiration!
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!
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!
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! :)
yes
That was super interesting! I'm planning out a website and this is really helpful for me.
Very helpful. Thank you so much. Looking forward to the rest of the episodes to complete the new web site.
I'm excited I found this! You are where I want to be in a couple of years! Thank you for sharing so much!
:)
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. :)
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!
Ready for this series!! Thank you!
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.
Thanks for the great video. Looking forward to seeing how you continue the process.
Amazingggggggggggggggggg! Thanks charlie! Loved it when people do start to finish process.
love the series idea!! so excited for more of them
loved this can't wait for the next one in the series!
Im so excited for this series :D
Thank you. I'm in the design process right now.
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.
Love the idea of this series, so helpful!
I just started my interface Design class and I have to work on a website brief, this was great to watch for inspiration!
This is a good explanation of the process of determining Site Architecture IMHO, thanks for sharing Charli.
Hey Charli! This was super helpful. Thanks a ton
Thank you!! Love the series , subscribed and made it simple to follow (specially that I’m visual!)
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...!!!
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.
Nice start. Looking forward to the next episodes
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
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.
Thanks Charli! I will be using your video for flipped learning to broaden the scope of understanding of my students about site structure.
That’s so cool to hear!
I´m redoing my entire portfolio and this was a great input to my process 👍
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!!
Great this is what I was looking for, someone who walk me through step by step. Thanks youuu
The way this has cleared my skin. Thank you
This is so cool! I love your channel because I want to be a web designer!
Well described, clear and easy to follow = Good stuff = Subscribed. Thank you for this :)
HELLO HUMAN, saw this and only 10 seconds in - SUBBED. Super excited to watch this series.
why?
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!
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!
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?
Thanks for your videos - very informative and inspiring at the same time)
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!
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 :)
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
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
hi
This is really great sharing of the process the thinking flow! Appreciated the effort and kindness! Thank you~~
Such an awesome idea! loved it:)
damn excited for this
This is a great resource, thank you!
This helps with my planning. Thanks!
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 😀
Haha thank you! This is what it looks like when the purple has completely faded from it haha
Hair is looking real good, Charli! 😻 the layers and colors 👌🏼
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!
You figured out " the real thing "... 😀😁😂
I’m super excited!
Yay! Glad to hear it!
Thank you it sounds wonderful
Thanks for sharing your process. What app were you using, if you don't mind sharing that info?
I know this video is 3 years old but it was super helpful and not overwhelming.
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!
Superb! One of the best examples of the high level planning needed for site building. More pls!!
Thank you! Will do!
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:)
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. 😂
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.
Glad it was helpful!
Gosh! Thought u 've got a kiwi accent then checked your page and you really are! Greetings from CHC!
Thank you Charli! 👏👏👏
hi Charlie, what software are you using to write on the screen?
10:50 min well spent. Great content. 💪
It's always good Charlie and I am becoming a web designer soon
Like Your new purple design ;)
Hello CharliMarie, I would love to know what webflow plan you currently are on and what the benefits are. Thanks
Thanks for making it
Wow! Thank You!
This was really nice and helpful. Thank you :)
She looks so cute. Cheers from Brazil!
Thanks Charli, it’s really helpful
Your video has actually helped and cleared the brain fog for me! Fantastic, thanks!
I'm so happy to hear that! Glad I could help :)
Hey thanks! Love this.
Great everybody very helpful to see this video.
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
It was really helpful .thanks
that was light up :) thank you a lot
hi Charli. Are there any good tools to design a site map. something like Figma for example
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.
what app are you using for notes .. i mean sketching for these pages information on ipad
Clean!😊👍
Thanks so much Charlie! New website is on my list so its great to watch your steps.
Excellent vid, more please.
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!! :)
how did you do the animation for your name on your portfolio?
Correct me if I am wrong, but in a formal environment, you would be using the SRS and Use Case Model to help you create the site map, right?
I don’t know what those mean specifically, but if you’re asking if more user research would be involved in a work scenario then yes!
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!
Which camera and lens are you using for your videos? Looks flawless!
Amazing content!
You're so good that sometimes stuff gets written on the screen when you have both of your hands up. :P
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!!
On what are you writing? Interesting vids by the way.
Thanks for sharing your work. Maybe I miss something but I cannot find the final version of your website based on this design... Is it available to see?
It’s not finished yet! But I just released the third video in the series. :)
Hi Charli, what do you use with your apple pen to create your sitemap? Are you running an app on your tablet or desktop?
Its an app on my iPad called Concepts :)
Great video. thank you for sharing.
Awesome!! am realing learning from you
Heya just watched the whole series of your website! I am checking it and seeing ur logo pixelated and no menu in the home page, is that ok?
Pixelated is when an image is blurry. my logo isn't blurry but it does have a little bit of dither (noise) around the edges because it's a gif :) (it animates when it loads in) And if you've seen the whole series you'll know that so far the only section that has a full menu is my blog.
This is literally saving me from misery because I have an assignment about this
Great work
Good one...
Your fan from India