# Designing your Website's Layout

In the previous article, we talked about how to create a sitemap of your website and create that sitemap's structure in Solodev. Once we're done with designing the sitemap and mimicking the sitemap in Solodev folder structure, it is time to design the layout of the pages. While a sitemap determines the structure of you navigation, the layout design determines the structure of each individual page. The best way to establish the layout of pages is by creating wireframes. That way, you can think in terms of how to organize your content, position elements, and decide on the main parts that will be included on the pages. Wireframing is easy and inexpensive. You can simply draw wireframes on a paper, on a whiteboard or use an app.

Before you can build your website you first need to deconstruct your designs into common elements that can then be turned into theme templates. This process involves identifying common areas of the site that will be present across all pages of a website as well as design elements which are unique to specific pages. In identifying these components such as your site's header, footer, content sections, hero sections etc., you will be able to clearly structure your theme.

Here's a sample wireframe which details how the main components such as the header, hero image, blog section, contact section and footer will look like as well the positioning of the content elements such as text, videos and images:

Once you finish designing the layout of the pages, the next step will be converting your design to basic HTML, CSS, and Javascript.