How to make a sitemap for a website

Подписаться 9 тыс.

Просмотров 88 тыс.

50% 1

Planning a new website? Learn how to make a sitemap for your website in this tutorial. I share my web design process starting with planning your website, identifying goals, and sketching a sitemap for a portfolio website.
UI design design is important for your website but step 1 is to plan your website and create a sitemap. Once you know the pages and content to include in your website, step 2 is design research and creating moodboards for the look and feel of the site. Step 3 is to wireframe possible solutions for webpages. The last steps are the UI design process and final design build.
What question do you have about planning a website project and how to create a sitemap for websites?
I used Procreate on an iPad Pro to sketch out the sitemap and website planning process.
How to design a website series: • How to design a website
---
LINKS
Want 10% off Field Notes? Use code MONICA10 fieldnotesbrand.com
Present your designs and artwork in a professional way, check out the Modern Frame Mockup Bundle: monicagalvan.co/mockups
Need help wireframing? Check out the Wireframe Kit: monicagalvan.co/wireframes
Try Skillshare free for 1 month: www.skillshare.com/r/user/mon...
---
ABOUT ME
Hello! I'm Monica, a designer living in San Francisco, California. This channel is a place where I share all my design and creative side projects. By sharing my process, I hope to help you learn more about design!
---
SOCIAL
Instagram - / themonicagalvan
Website - monicagalvan.co/

Опубликовано:

8 июн 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 89

@nowhat000 Год назад

Thank you Monica! I just listed a feature set and am about to do a card sorting exercise with participants and I froze up when I had to think about the content of the cards. This helped me zoom out and reassess the what will go on the cards so I can soon create a rockin' sitemap. 🙂 Totally subscribing!

@monicasdesignprocess Год назад

Love hearing how my video helped you! Thanks for sharing and for subscribing 🙂

@roxannepilat1021 3 года назад

Very clear and helpful. Shared with my college students, who are building their own sites. Thank you!

@monicasdesignprocess 3 года назад

That’s amazing, I hope your college students find value out of it!

@BeMaBa 4 года назад

Can’t wait to see all the process!

@monicasdesignprocess 4 года назад

Coming very soon 🙂

@pepsitoly 3 года назад

That's great! Simple, short and useful. Thank you :)

@monicasdesignprocess 3 года назад

You’re welcome 🙂

@ShanayBraxton 3 года назад

This very helpful! Your explanation was very simply and straight to the point. Thank you!

@monicasdesignprocess 3 года назад

Happy to hear the video helped you out! Thanks for watching 😃

@jomjamyw2231 3 года назад

This is very clear and helpful! Thank you very much 🙏🏼🙏🏼🙏🏼

@monicasdesignprocess 3 года назад

You’re welcome! ☺️

@ericaguadalupe6835 3 года назад

Thank you! I’m just recently getting into this career field and your explanation was super straightforward and simple. I will most definitely be referencing back to this whenever i can :) have a blessed day!!!

@monicasdesignprocess 3 года назад

So great to hear! Congrats on getting started on the new career, best of luck 🙂

@mrdark601 3 месяца назад

How are you doing now, bud?

@mohamedalaa6199 3 года назад

Okay, this is simple, helpful and cool.

@monicasdesignprocess 3 года назад

Glad to hear it help you! Thanks for watching :)

@devwithsmile_5367 3 года назад

I needed it ❤️ . Thank you . Love and respect from India 🇮🇳

@monicasdesignprocess 3 года назад

You’re welcome! Glad you enjoyed it, thanks for watching 🙂

@HomelanderdaGOAT Год назад

Thank you for sharing and simplifying!

@monicasdesignprocess Год назад

You’re welcome Nathan! 🙂

@20171mohamed1 4 года назад

Super helpful , Thank you 🙏🏼🙏🏼

@monicasdesignprocess 4 года назад

Glad to hear it 😁

@tanakachinounye9632 7 дней назад

thanks for this!

@monicasdesignprocess 7 дней назад

Of course! Thanks for reaching out ☺️

@Vancittyy 2 года назад

Monica, Monica, Monica... you're the apple of my eye, the stars to my wandering gaze, and the rose pedals that are so soft YOU GET IT>I really, really appreciate you girl. Stay great.

@monicasdesignprocess 2 года назад

Thanks 🙂

@SavageKya 2 года назад

Omg I love your channel 🔥💙and your voice is so soothing

@monicasdesignprocess 2 года назад

Thanks for the kind words! I appreciate it 🙂

@aarodesigns6865 3 года назад

Thanks for this quality information

@monicasdesignprocess 3 года назад

You’re welcome Micheal 🙂 thanks for watching!

@dipeshgorkhali1179 3 года назад

Thanks for the information.

@monicasdesignprocess 3 года назад

You’re welcome! 🙂

@CreativeAiArtistry Месяц назад

Great video

@monicasdesignprocess Месяц назад

Thanks for watching!

@designnpassion8207 3 года назад

Very nicely explained ..!

@monicasdesignprocess 3 года назад

Thank you!

@sby15tv 3 года назад

medium brought here! Keep up the good work.

@monicasdesignprocess 3 года назад

Ah so awesome! Thanks for watching (and reading) 😃

@vadneydasilva230 2 года назад

*Thank You* for you content... 😍

@monicasdesignprocess 2 года назад

You’re welcome Vadney 🙂

@majidabbasilarki3118 2 года назад

It was very useful. It was great.

@monicasdesignprocess 2 года назад

Thanks Majid 🙂

@oldaccount275 Год назад

beautiful

@monicasdesignprocess Год назад

Thank you

@matheuscardoso1740 3 года назад

thank you!!!

@monicasdesignprocess 3 года назад

You're welcome! 🙂

@ivomarin Год назад

Hello Monica, after 2 years. To design my website, i use logo-images based on human activities, with their undergroups (ex: Sport: team sports/ athletics sports / riding sports / ... ) and then the sociological question: sign up in a club, find a partner to practice with, buy materials, sign up in a competition, watch the results and more. It gives to the reader an easy and intuitive way to find what he wants. It’s practical and helpful.

@monicasdesignprocess Год назад

Interesting thought process, thanks for sharing!

@safetypedia6129 Год назад

nice video for beginners

@monicasdesignprocess Год назад

Thanks

@funquizzes36 2 года назад

New Subscriber from Philippines

@monicasdesignprocess 2 года назад

Thank you and welcome! 🙂

@funquizzes36 2 года назад

I'm new and plan to build my own website to find clients as graphic designer. Thanks

@davehansel9715 Год назад

I simply use someka's sitemap generator. Easiest tool to create sitemap diagrams imho. Thanks for the video:)

@monicasdesignprocess Год назад

Thanks for the tip! I’ll have to check it out 🙂

@MUHAMMADRIZALBINREDZUANDOA 3 месяца назад

thanks

@monicasdesignprocess 3 месяца назад

You’re welcome

@sphinxz_gaming 2 года назад

Same I am going to make my own Personal Website! 3:08 Timestamp What's the external mean? do they have a connection to the about?

@monicasdesignprocess 2 года назад

External as in links that may link out to other websites, outside of yours. Good luck on creating your personal site!

@Ariasl05 3 года назад

Seriously didn't realize how badly I needed your tutorials, I'm really looking forward to growing with your channel. Much love from Texas and thanks for the help 🤗💗

@monicasdesignprocess 3 года назад

Oh this is such a lovely comment, you made my day ☺️ thank you for sharing and for watching!

@thebridge2019 3 месяца назад

Thank you it help a lot😂😂

@monicasdesignprocess 3 месяца назад

Not sure what’s so funny but you’re welcome.

@srgtslnv 3 года назад

Please help me to become a web designer

@angelfabio9413 2 года назад

Hi, How to create a website? Pls I need your help I really need it for school

@monicasdesignprocess 2 года назад

This is a big request! How’re you intending to create your website? As in custom code or using a website builder like Squarespace?

@angelfabio9413 2 года назад

@@monicasdesignprocess hi I already create a website in WordPress

@Nikhil-zs8zs 2 года назад

@@angelfabio9413 I can help you to make a website

@MistaSmith 2 года назад

While watching it, I worry a lot that this sitemapping practice will lead to over-engineering. If you give people a tree structure, they want to attach stuff to it and link elements to each other. So I wonder if it makes sense to start with user journeys first and use the journeys (e.g. linked lists of low-fidelity wireframes and/or story boards) as a test to see if all the user needs are met with the sitemap and if there are parts of the sitemap that are never touched by any user journey at all. What do you think about that idea?

@monicasdesignprocess 2 года назад

Yes! Both site-mapping and user flows can and often are created at the same time, they help inform each other. That’s a good point, but I’m sure there will always be some pages that rarely fall into a user’s journey but are still essential.

@BrandiHess13 3 года назад

How do you typically represent pages on the website that aren't connected to the home page?

@monicasdesignprocess 3 года назад

That's a great question! If it's on the footer of the homepage, you would still want to connect it with that tab. If they are not at all linked, they would be within their own box off to the side, not connected. For a better visual idea of this, do a quick google image search for sitemap example and you'll see what I mean.

@BrandiHess13 3 года назад

@@monicasdesignprocess thanks, that's very helpful.

@mxqrmy2000 2 года назад

Pls seckscribe this good

@monicasdesignprocess 2 года назад

Thanks for the kinds words :)

@IAMDRREMULAKK 3 года назад

I'm sorry, i skipped around this video, but... was there anything here about how to create a sitemap??? I saw somebody drawing words in a diagram. But nothing about, you know... how to create a sitemap.

@monicasdesignprocess 3 года назад

It helps to watch the complete video for a background, it's only 4 minutes. I share the sitemap around 2:15.

@thigarette1 3 года назад

Hey @IAMDRREMULAKK. I think I understand your confusion. This video is more about planning the structure of your site, not actually creating an xml sitemap to be used for like SEO.

@IAMDRREMULAKK 3 года назад

@@thigarette1 Yes, thigarette. That is exactly what I was talking about. Most people refer to a sitemap as an xml file that contains links and other pertinent information about those links, that is uploaded to the website so that search engines can easily detect all of the links that you want them to.

@IAMDRREMULAKK 3 года назад

@@monicasdesignprocess I understand Monica. The video is a very good idea on how to visualize the structure of your website. But I was looking for how to create a sitemap for search engines, as "thigarette" mentioned.

@olcatgaming859 3 года назад

I expected a black background, my disappointment is immeasurable, and my eyes are ruined

@monicasdesignprocess 3 года назад

Oh no! Dark mode is pretty nice.

@tibork3845 2 года назад

That is great, however this has NOTHING to do with how you create a sitemap, this is all about how to design a website. A sitemap is a page (XMS, RSS, mRSS) that tells search engines how to locate and navigate on your already created website and its sub-pages, once your website is live then a sitemap is created and uploaded to your web hosting account (root folder) and submitted to search engines. Please change your title as this is misleading and confusing to people. Thank you!

@monicasdesignprocess 2 года назад

If you know so much about this topic, why did you search for and watch a video on it? 🤔 maybe make your own and stop dictating what others should do with their videos. Also, it has everything to do with it. Before you can create the actual site map page for search engines, you need to think about the structure of your website and plan things out. I took the planning for the site map all the way back to step zero, providing context.

@tibork3845 2 года назад

@@monicasdesignprocess It's your choice to confuse people but soon as they have a website and start looking for SEO optimization and find out what really is a sitemap they will say you confused them. This video is not about sitemap creation but about website design. I wasn't saying anything about the video but about the misleading title. I searched for sitemap videos (after reading several articles) because I do know how to create HTML and XML sitemaps however don't know RSS. I don't make videos for RU-vid because I don't have the time nor the interest for it.

@robertoverbey3202 2 года назад

Maybe you should actually make the sitemap file and show that. . . since the video is ostensibly supposed to show "How to make a sitemap for a website."

@monicasdesignprocess 2 года назад

Have a wonderful day Robert!

@robertoverbey3202 2 года назад

@@monicasdesignprocess No offense intended. I am not trying to disparage your video here. It is useful. I just think there is a bit of a mismatch between "sitemap", a technical, defined term which is critical to the SEO and launch of a website and needs to be deployed in a specific manner in order for a bot to correctly index your site, and web page design. You have presented a design video which I am sure many people will find quite useful as a guide on how to lay out an orderly process in order to create a site. It is not however, a video on how to create a sitemap and then include a sitemap in a robots.txt file or submit it to google.