How do you draft your sites?

Recently, I have come up with a project that I really want to work on. It involves fashion and I’m slowly working my way to create what I’m envisioning. However, there’s one things I’ve always struggled with and that’s drafting sites (aka sitemaps). What advice would you have to start a rough draft?

I’m not expecting everything to stay the same as I progress, but a jumping start would be nice.

@threegoldcoins Are you referring more to a wireframe? Like what you would create in something like Figma? Or are you actually talking about a sitemap file for search engines to to crawl your site more efficiently?


As sitemaps go, if you have your site already live and crawlable, you may wish to generate an XML Sitemap which can then be submitted to Google, Bing, etc. search engines. Some services will also generate an HTML sitemap to include with your site (for your visitors), or even a raw text list of all your pages for your own records.

If you are only in the design and assembly stages, then as @freddieb77 suggests, a wireframe will be a great aid in putting your ideas on paper, so to speak. At the very least, you should have some sketch paper, or graph paper to illustrate your layout and composition ideas.


I supposed it is wire framing(?), please correct me if I’m wrong: I’m trying to develop the front end of my project first because I want to be able to understand what I need before I start diving into the backend (I don’t know backend stuff yet, so that may take me a while).

For now, I’m trying to develop the front end side of my website.

Ok If you are planning out your site initially I would just as @mtf replied create a wireframe on some type of paper I have been using graph paper just to make my lines easier. :laughing: After I have my ideal layout where I like it, I transfer that to something digital like using Figma. You don’t have to make it digital. I have been because I have been including my wireframe in the README.MD in my github repo for each project.


Thank you for the advice. I do have a lot of graph paper lying around, so I’ll definitely try my hand at wireframing by hand before I move on to websites like Figma.